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:
- User see arising errors at once
- The server has lesser to do, cause it must not handle invalid requests
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 an single line of code. It is optionally possible to set decimal and thousand separators for different country formatings.
<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
The compressed javascript file of JSAction framework can be downloaded here:
JSAction.js
