Inline Form Validator using DOM and Javascript
form_utils.js is a simple Javascript library that provides inline form validation using Document Object Model (DOM). The validations can be embedded within the HTML form element. For e.g 
<input type="text" name=regex mandatory="no" 
             validation="custom" regex="\w+\d+">
The library provides support for adding validation attributes to any HTML form element. It comes with pre-defined types like email, date, date_mm, number, text, alpha, decimal and uri. The library also allows you to define your own custom validations. To validate all elements, just call checkForm("form_name"). The support utilities in the library also provide an uniform way of accessing and setting the value of any type of form element.

This package is free software. It is distributed under GPL - legalese removed, it means that you can use this for any purpose, but cannot charge for this software. Any enhancements you make to this piece of code, should be made available free to the general public! You should also carry a link to this page for users to download the latest version.

This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Download the javascript code. See below for examples. You can also use the same utility for easy get/set of all type of form variables. See example
Validate form elements. In-built validation types are email, date, date_mm, number, text, alpha, decimal and uri. You can add your own validations by using type=custom and specifying the regex. All fields should have a valid "name" attribute for this library to work.

To validate, just call checkForm("form_name"). This function validates the elements, displays appropriate messages in an alert box and returns the status (true or false) of the validation of all form elements.

Important Note: If you are using tables with your form, make sure they are fully contained within the form. For example, <form><table>.....</table></form>

Email <input type="text" name=email mandatory="yes" validation="email">
Regex \w+\d+ or blank <input type="text" name=regex mandatory="no" validation="custom" regex="\w+\d+">
Mandatory textarea <textarea name=textarea mandatory="yes"> </textarea>
Mandatory Radio Test1
Test2		 <input type=radio name=radio1 mandatory="yes" value="t1"> Test1

<input type=radio name=radio1 value="t2"> Test2
Mandatory Checkbox Test1
Test2		 <input type=checkbox name=chkbox1 mandatory="yes" value="t1"> Test1

<input type=checkbox name=chkbox1 value="t2"> Test2
Selectbox <select name="drop_down1" mandatory="yes">
<option value="">
<option value="t1"> T1
<option value="t2" >T2
</select>
Selectbox with regex and custom error message <select name="drop_down2" validation="custom" regex="(t1|t2)" error="Select a value">
<option value=""> -- select one --
<option value="t1"> T1
<option value="t2" >T2
</select>
Links
Home