formValidator
javascript form validation library
About
formValidator is a Javascript library for extremely easy client-side validation of HTML forms
(normally an arduous process).
All you do is include the library, add some attributes to the fields to validate, and use the validation function.
You can replace repetitive script like:
myform1.onsubmit=function(){
if(myform1.fullName.value==''){
alert("Name is required.");
myform1.fullName.focus();
return false;
}
if(myform1.nAge.value=='' || isNaN(myform1.nAge.value) || myform1.nAge.value<1){
alert("Age is required, and must be a number greater than 0.");
myform1.nAge.focus();
return false;
}
...(and more for every checked field)...
}
with one line of code:
myform1.onsubmit=function(){
return validateForm(myform1);
}
the fun stuff
formValidator Demo
View Source:
formValidator.js (library)
interface documentation
- validateForm(p_oForm) function
- desc: performs full validation of all elements in form. highlights/focuses field & raises error messages if any is invalid
- params: form object reference
- returns: boolean (true/false) whether form successfully validates
- validateField(p_oField) function
- desc: performs validation of single field element. highlights/focuses field & raises error message if invalid
- params: field object reference
- returns: boolean (true/false) whether field successfully validates
- showFailedField(p_oField, p_strErrMessage) function
- desc: highlights/focuses field & raises Custom error message (for custom validation, as with business rules)
- params: field object reference
- returns: nothing
- validation attributes and possible values:
- dataType: date, datetime, time, boolean, numeric, integer, float,
email, phone, ssn, postal code/zipcode, creditcard
- required: true, false
- minlength: 0 - 9999~ (any positive integer)
- minValue/maxValue: freeform (depends on how JS tries to datatype it; works with numeric, strings and some dates)
usage
- Include the library:
<script language="javascript" type="text/javascript" src="formValidator.js"></script>
- Add formValidator attributes to any form fields you want validated, e.g.:
<input name="nAge" required="true" dataType="numeric" minValue="1" maxValue="120" />
<select name="State" required="true">...</select>
- Hookup a form onsubmit event handler to validateForm(), passing it a reference to the form object e.g.:
<script language="javascript" type="text/javascript">
myform1.onsubmit=function(){
return validateForm(myform1);
}
</script>
or inline...
<form onsubmit="return validateForm(this)">...</form>
That's all it takes!
Suggestions
- You may may also validate data types/formats in real-time, as the user fills out the form.
Just hookup onchange event handlers to
validateField(), passing references the field object:
<input name="nAge" datatype="numeric" ... onchange="validateField(this)" />
(note: This only validates data-formats/data-types.
Required & minLength checks are saved until validateForm is called [when the form is submitted].)
- Use good title attributes for all validated fields (this is good for accessibility anyway).
Should formValidator find an error, it will first try to reference the field by its title
(failing that, its name, then id attributes).
We recommend making the title match the field label.
- formValidator is also useful with custom Business rule validation.
After checking your custom business rule, you may put your custom error messages into the standard
formValidator error dialog with showFailedField(), e.g.:
<script language="javascript" type="text/javascript">
myform1.onsubmit=function(){
//check biz rules
var bIsValid = validateForm(myform1);
if(bIsValid){
bIsValid = (myform1.nYearsInService.value >= myform1.nAge.value);
if(!bIsValid){
showFailedField(myform1.nYearsInService, '"Years In Service" should be less than your Age.')
}
}
return bIsValid;
}
</script>
notes
- Currently Internet Explorer specific (DOM issues).
- Checkboxes & Radio buttons are currently ignored by required checks.
- Fields with datatype="date" or "datetime" are automatically re-formatted when the field is checked.
This helps normalize date formats going into a database. (Edit the FormatShortDate function for a different format.)
- minValue/maxValue is still somewhat experimental -- it depends on Javascript implicitly deciding datatypes.
- If you're interested, you can play with
formValidator's VBScript ancestor.
Planned:
- Cross-browser compatibility
- Enable required check on Checkboxes/Radio buttons
- Easier customization: automatic date-format, custom error message attribute, highlighted field styles...
- More built-in data-type/format checks (currency, URL...)
- Smarter minValue/maxValue checking (more type-aware)
- Greater internal encapsulation (to minimize possible name collisions)
- Automatic CSS flagging of required fields
support
As-is, etc. If you ask nicely, I may provide support via email.
credits/author
-Rob (@slingfive) Eberhardt, Slingshot Solutions
Use freely, but be honest about it.
I just ask for credit.
« slingfive.com