11 February 2007 - Javascript form validation
Recently I was asked to change the form validation code for a couple of websites.
It was the occasion to rewrite from scratch the validation code of an old library I've been using for several years.
The library (
sgForms.js) depends on
prototype and is released under the
Mozilla Public Library. You can download
sgForms along with a simple
test page.
To use the form validators you have to include the prototype library and sgForms in the html page:
<script src="prototype.js"></script>
<script src="sgForms.js"></script>
Here's an example form to check:
<form name="testForm" id="testForm" method="GET" action="#" onSubmit="return checkForm();">
<label>email</label> <input type="text" id="email" name="email" value=""><br>
<label>field 1</label> <input type="text" id="one" name="one" value=""><br>
<label>field 2</label> <input type="text" id="two" name="two" value=""><br>
<label>CheckBox</label> <input type="checkbox" id="myCheck" name="myCheck" title="CheckBox" value="whatever"><br>
<label>regex</label> <input type="text" name="regex" value=""><br>
<input type="submit" name="clickme" value="Check Form">
</form>
Each form field must have an id. I use the onSubmit event to check the form validity and based on the result to stop the submit or continue.
Here's the checkForm function where we define the validation rules for each field and call a function in the sgForms library that performs the validation:
<script language="javascript">
<!--
function checkForm() {
var rules = {'email':['notEmpty', 'email'], 'one':['notEmpty'], 'two':['notEmpty'], 'myCheck':['isChecked']};
return sgFormValidateAlert(rules, 'it');
}
//-->
</script>
rules is a javascript object which is transformed into an hash (associative array) using protype. Rules contains the ids of the fields to validate and the rules to apply to each field.
- 'notEmpty' rule means a field is required
- 'email' applies a regular expression to check for a valid email
- 'isChecked' applied to a checkbox field verifies the field is checked
- other rules are 'float' and 'number' to check for a float or number value respectively
You can supply custom validators defining a rule such as:
'myField': [myRuleValidator]
where myRuleValidator is a functions of three arguments
myRuleValidator(field, fieldValue, lang)
- field is a reference to the field we are validating (I use it to build error messages together with lang)
- fieldValue is the value of field
- lang is the language for the error messages ('en' for english, 'it' for italian)
sgForms contains a basic validator (sgFormValidate) which performs the validation and returns an empty list if all fields validated correctly, or a list with the errors. On this I've built a sgFormValidateAlert wich calls sgFormValidate and returns the errors if present in an alert window. There are also sgFormsValidateBrString returning a <br> separated string of errors and sgFormsValidateString returning a '
' separated string of errors. However you can use sgFormValidate to present errors in the way you prefer.
I've already used the library on some sites and it seems to work fine. My next steps will be to add some validators (e.g. a regex validator) and to teach its use to web designers to see if it's easy enough to be used also by a non-programmer.
Comments (2) -
Leave a Comment
