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

  1. Include the library:
    <script language="javascript" type="text/javascript" src="formValidator.js"></script>
  2. 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>
    
  3. 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

  1. 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].)
  2. 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.
  3. 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

Planned:

  1. Cross-browser compatibility
  2. Enable required check on Checkboxes/Radio buttons
  3. Easier customization: automatic date-format, custom error message attribute, highlighted field styles...
  4. More built-in data-type/format checks (currency, URL...)
  5. Smarter minValue/maxValue checking (more type-aware)
  6. Greater internal encapsulation (to minimize possible name collisions)
  7. 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