Download DHTML form validation script

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

<style type="text/css">

body{
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
	background-color:#FFF;
	font-size:0.9em;

}
	
/* General styling for both valid and invalid input */
.invalidInput,.validInput{
	display:compact;
	padding:1px;
}
/* Style for invalid input */
.invalidInput{
	border:1px solid #F00;
}

/* Style for valid input */
.validInput{
	border:1px solid #FFF;
}
</style>
<script type="text/javascript">
/************************************************************************************************************
Copyright (C) February 2006  DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later 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.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2010
Owner of DHTMLgoodies.com

************************************************************************************************************/
	
// Patterns
var formValidationMasks = new Array();
formValidationMasks['email'] = /\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi;	// Email
formValidationMasks['numeric'] = /^[0-9]+$/gi;	// Numeric
formValidationMasks['zip'] = /^[0-9]{5}\-[0-9]{4}$/gi;	// Numeric

var formElementArray = new Array();

/* These two event functions are from http://ejohn.org/apps/jselect/event.html */

function addEvent( obj, type, fn ) { 
  if ( obj.attachEvent ) { 
    obj['e'+type+fn] = fn; 
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );} 
    obj.attachEvent( 'on'+type, obj[type+fn] ); 
  } else 
    obj.addEventListener( type, fn, false ); 
} 
function removeEvent( obj, type, fn ) { 
  if ( obj.detachEvent ) { 
    obj.detachEvent( 'on'+type, obj[type+fn] ); 
    obj[type+fn] = null; 
  } else 
    obj.removeEventListener( type, fn, false ); 
} 


function validateInput(e,inputObj)
{
	if(!inputObj)inputObj = this;		
	var inputValidates = true;
	
	if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='INPUT' && inputObj.value.length==0)inputValidates = false;
	if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='SELECT' && inputObj.selectedIndex==0){
		inputValidates = false;
	}
	if(formElementArray[inputObj.name]['mask'] && !inputObj.value.match(formValidationMasks[formElementArray[inputObj.name]['mask']]))inputValidates = false;

	if(formElementArray[inputObj.name]['freemask']){
		var tmpMask = formElementArray[inputObj.name]['freemask'];
		tmpMask = tmpMask.replace(/-/g,'\\-');
		tmpMask = tmpMask.replace(/S/g,'[A-Z]');
		tmpMask = tmpMask.replace(/N/g,'[0-9]');
		tmpMask = eval("/^" + tmpMask + "$/gi");
		if(!inputObj.value.match(tmpMask))inputValidates = false
	}	
	
	if(formElementArray[inputObj.name]['regexpPattern']){
		var tmpMask = eval(formElementArray[inputObj.name]['regexpPattern']);
		if(!inputObj.value.match(tmpMask))inputValidates = false
	}
	if(!formElementArray[inputObj.name]['required'] && inputObj.value.length==0 && inputObj.tagName=='INPUT')inputValidates = true;
	
	
	if(inputValidates){
		inputObj.parentNode.className='validInput';
	}else{
		inputObj.parentNode.className='invalidInput'
	}
}

function isFormValid()
{
	var divs = document.getElementsByTagName('DIV');
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='invalidInput')return false;
	}
	return true;	
}




function initFormValidation()
{
	var inputFields = document.getElementsByTagName('INPUT');
	var selectBoxes = document.getElementsByTagName('SELECT');
	
	var inputs = new Array();
	
	
	for(var no=0;no<inputFields.length;no++){
		inputs[inputs.length] = inputFields[no];
		
	}	
	for(var no=0;no<selectBoxes.length;no++){
		inputs[inputs.length] = selectBoxes[no];
		
	}
	
	for(var no=0;no<inputs.length;no++){
		var className = inputs[no].parentNode.className;
		if(className && className.indexOf('validInput')>=0)continue;			
		var required = inputs[no].getAttribute('required');
		if(!required)required = inputs[no].required;		
		
		var mask = inputs[no].getAttribute('mask');
		if(!mask)mask = inputs[no].mask;
		
		var freemask = inputs[no].getAttribute('freemask');
		if(!freemask)freemask = inputs[no].freemask;
		
		var regexpPattern = inputs[no].getAttribute('regexpPattern');
		if(!regexpPattern)regexpPattern = inputs[no].regexpPattern;
		
		var div = document.createElement('DIV');
		div.className = 'invalidInput';
		inputs[no].parentNode.insertBefore(div,inputs[no]);
		div.appendChild(inputs[no]);
		div.style.width = inputs[no].offsetWidth + 'px';
		
		addEvent(inputs[no],'blur',validateInput);
		addEvent(inputs[no],'change',validateInput);
		addEvent(inputs[no],'paste',validateInput);
		addEvent(inputs[no],'keyup',validateInput);
		
	
		formElementArray[inputs[no].name] = new Array();
		formElementArray[inputs[no].name]['mask'] = mask;
		formElementArray[inputs[no].name]['freemask'] = freemask;
		formElementArray[inputs[no].name]['required'] = required;
		formElementArray[inputs[no].name]['regexpPattern'] = regexpPattern;

		validateInput(false,inputs[no]);
			
	}	
}

window.onload = initFormValidation;

</script>

Example code for your <BODY> section

<form action="dhtml-form-validation.html" method="post" onsubmit="if(isFormValid())alert('Everything is ok'); else { alert('Something is wrong');return false; }">
<fieldset>
	<legend>Dynamic form validation</legend>
	<table>
		<tr>
			<td><label for="input1">First name:</label></td>
			<td><input name="input1" id="input1" type="text" required="1" value=""></td>
			<td>Required = 1</td>
		</tr>
		<tr>
			<td><label for="input2">Last name:</label></td>
			<td><input name="input2" id="input2" type="text" required="1" value=""></td>
			<td>Required = 1</td>
		</tr>
		<tr>
			<td><label for="email">Email:</label></td>
			<td><input name="email" id="email" mask="email" type="text" size="30" required="1" value=""></td>
			<td>Required = 1, mask = email</td>
		</tr>
		<tr>
			<td><label for="age">Age:</label></td>
			<td><input name="age" id="age" mask="numeric" type="text" required="1" value="" size="3" maxlength="3"></td>
			<td>Required = 1, mask = numeric</td>
		</tr>
		<tr>
			<td><label for="code">Code(SSSS-NN):</label></td>
			<td><input name="code" id="code" freemask="SSSS-NN" type="text" required="1" value="" size="8" maxlength="7"></td>
			<td>Required = 1, freemask = SSSS-NN i.e four letters and two digits</td>
		</tr>	
		<tr>
			<td><label for="zipcode">Zip code(NNNNN-NNNN):</label></td>
			<td><input name="zipcode" id="zipcode" mask="zip" type="text" required="1" value="" size="11" maxlength="10"></td>
			<td>Required = 1, mask = zip</td>
		</tr>		
		<tr>
			<td><label for="zipcode">Domain:</label></td>
			<td><input name="domain" id="domain" regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi" size="30"  type="text" value=""></td>
			<td>regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi"</td>
		</tr>	
		<tr>
			<td>Country</td>
			<td><select name="country" required="1">
				<option value=""></option>
				<option value="Norway">Norway</option>
				<option value="Denmark">Denmark</option>
				<option value="Sweden">Sweden</option>
				<option value="Finland">Finland</option>
				<option value="France">France</option>
				<option value="United States">United States</option>
				<option value="Germany">Germany</option>
				</select>
			</td>
			<td>Required = 1</td>
		</tr>
		<tr>
			<td><input type="submit" value="Send"></td>
		</tr>
	</table>
</fieldset>
 </form>

Configuration

Attributes

This scripts validates text inputs as you type and select boxes after something has been selected. Attributes on the tags are used to determine the validation process.

Attributes:

required=1 - Required field. The red border will show if text field is empty or nothing is selected from drop down(select box)
mask = Some predefined masks are defined. At the moment, you can choose between, email, zip("NNNNN-NNNN") and numeric.
freemask = A combination of string and digits. Example: freemask = "NNNN-SS" which means that there has to be 4 digits followed by a hyphen followed by two alphabetical characters(A-Z)
regexpPattern = A regular expression pattern. Example: regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi" which is the pattern for an internet domain(e.g.: www.dhtmlgoodies.com).

Note! Only the attribute "required" is supported for select boxes

This is an example of how to assign attributes to an input:

CSS styling

CSS is used to style the rectangles around valid and invalid inputs. Example:

/* Style for invalid input */
.invalidInput{
border:1px solid #F00;
padding:1px;
}

/* Style for valid input */
.validInput{
border:1px solid #FFF;
padding:1px;

}

Form submission

There is a function isFormValid which validates your entire form. This function returns true if there are no red borders and false otherwise. You can call the function in the onsubmit event of your form. Example:

Script intialization

The script is initialized by a window.onload event, i.e. window.onload = initFormValidation; at the bottom of the <script> section. This means that the initFormValidation function is executed after the content of the page is rendered on the screen. You may also call this function manually. I.e. remove the window.onload = initFormValidation line and call the initFormValidation() function below your form. Example:

You should also know that you can't have more than one window.onload event per page. So if you allready have a window.onload event, you have to call it manually as shown above, or call the initFormValidation function from your existing window.onload function.

Note! It's important that you also validates the submitted data on your server. You shouldn't rely on this validation script alone.