Form : Input Validation


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


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

Additional parameter

Minimum value 1
Maximum value 10
Step wide
Input is required
Input should not be formated
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