Form : Input Validation

Common

In internet and intranet application all input data of users must be checked for validation. Validation at the server is always neccessary, because requests could be manipulated deliberately.

Validation of form input at the client, which is discussed here, is a usefull extension with this advantages:

Validation on submit

This variant checks all input fields one after the other when the form will be submitted. If an error is detected, the user get informed, the focus set on the depending input field and the following process aborted. The return value false prevents the submitting of the form to the server.

<form action="change.html" onsubmit="return check()" method="post"> <input type="text" name="firstName" id="firstName"/> ... <input type="submit" value="Save"/> </form> function check() { var element = null; element = document.getElementById('firstName'); if (element.value.length <= 0) { alert('Your first name is missing!'); element.focus(); return false; } .... return true; }

Realtime Validation

The realtime validation checks all user inputs on each key stroke (onkeyup) and/or when the focus is lost (onblur).

The javascript framework JSAction contains some standard validation functions. Special identifier makes it very easy to connect input fields with functions, without coding of own javascript code.

The layout of the input field when errors occur is done global with CSS selectors. So everybody can decide if it should be a red border or an colored background.

input.error, select.error, textarea.error { border: 2px solid red; }

The javascript framework will be configured in the page header with just a few line of code. It is optionally possible to set decimal and thousand separators for different country formatings.

<script src="JSAction_en.js" type="text/javascript">//</script> <script src="JSAction.js" type="text/javascript">//</script> <script type="text/javascript"> //<![CDATA[ HpResource.decimalSeparator = '.'; HpResource.groupingSeparator = ','; //]]> </script>

Now you can code the normal input fields and just simple set special identifier in the class attribute to get the desired functions. The soure code is absolute valid.

Number <input type="text" name="quantity" class="integer"/>
Price <input type="text" name="price" class="currency"/>

The number field allows only integer, the price field allows only up to two decimal places. The value will be formated when the focus switches to other input.

Number Price

Identifier

integer
Only integer
decimal
Decimal numbers with any decimal places
currency
Price with 2 decimal places
rate
Price with 4 decimal places

Additional parameter

minimum1
Minimum value 1
maximum10
Maximum value 10
step
Step wide
required
Input is required
plain
Input should not be formated
notrim
No validation for leading or following spaces

Johannes Hammoud Form : Input Validation 21.10.2007

I Coding : Community about Java programing

Language German+-

Java JSF JavaScript HTML CSS NetBeans GlassFish MySQL

Imprint

Visits
938870
Today
91