Free Form Validation JavaScript: checking while you are filling out the form

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free Form Validation JavaScript
What's so special about this free form validation JavaScript? First of all it checks the fields while you are filling out the fields. The script masters three different tasks:

- It checks whether the required textfields are filled out.
- It validates the email address.
- It checks whether the textfield contains numbers only.

The free form validation script works fine with nternet Explorer 5x/6x/7x/8x/9x, Firefox 2x/3x, Opera 8x/9x/10x/11x, Google Chrome 3x/4x/5x/6x/7x/8x.

Demo Form
Use the demo form below and fill out the fields with incorrect and correct values in order to see how it works.

Configuration:

Step 1: Open your webpage and paste the following code anywhere between <body> and </body>. The code contains a sample-form that can be modified to your needs.

<style>
/* Do not delete .isnotok */
/* Here you may set the style for all form-fields that are empty or filled out incorrectly */
.isnotok {
color:black;
border-style:solid;
border-color:red;
border-width:1px;
background-color:#FFCCCC;
}

/* Do not delete .isok */
/* Here you may set the style for all form-fields that are filled out correctly */
.isok {
color:black;
border-style:solid;
border-color:green;
border-width:1px;
color:black;
background-color:#FFFFFF;
}

/* Do not delete and do not change .invisibleok */
.invisibleok {
}

/* Do not delete and do not change .invisiblenotok */
.invisiblenotok {
background-color:yellow;
}

</style>

<script>
// CREDITS:
// Free Form Validation JavaScript
// by Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// 11/16/2010

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where this script will be running.

// CONFIGURATION:
// Go to http://www.fabulant.com and get the original code 
// with step-by-step instructions and copy-and-paste installation.

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// Enter the names of all required form-fields. The names must be the same as the names used in the form!
var checkedfields=new Array("email", "ZIP", "city", "sex", "age")

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
/////////////////////////////////////////////////

// Do not edit below this line
var whereisat
var whereisdot
var dosubmit=0
var thisid
var checkedfields_truefalse= new Array()
for (i=0;i<checkedfields.length;i++) {
	checkedfields_truefalse[i]=false
}

function check_filledout(fieldname, errormessage) {
	var tp=fieldname.type
	thisid=fieldname.id=fieldname.name
	with (fieldname) {
		switch(tp){
		
			case "radio":
				if (fieldname.value == ""){
					document.getElementById(thisid).className="invisiblenotok";
					for (i=0;i<checkedfields.length;i++) {
						if (checkedfields[i]==thisid) {
							checkedfields_truefalse[i]=false
						}
					}
					return false;
				}
				else {
					document.getElementById(thisid).className="invisibleok";
					for (i=0;i<checkedfields.length;i++) {
						if (checkedfields[i]==thisid) {
							checkedfields_truefalse[i]=true
						}
					}
					return true;	
    			}
			case "select-one":
				if (selectedIndex == -1 || options[selectedIndex].text == ""){
					document.getElementById(thisid).className="invisiblenotok";
					for (i=0;i<checkedfields.length;i++) {
						if (checkedfields[i]==thisid) {
							checkedfields_truefalse[i]=false
						}
					}
					return false;
				}
				else {
					document.getElementById(thisid).className="invisibleok";
					for (i=0;i<checkedfields.length;i++) {
						if (checkedfields[i]==thisid) {
							checkedfields_truefalse[i]=true
						}
					}
					return true;	
    			}
			case "select-multiple":
				if (selectedIndex == -1){
					document.getElementById(thiside).className="invisiblenotok";
					for (i=0;i<checkedfields.length;i++) {
						if (checkedfields[i]==thisid) {
							checkedfields_truefalse[i]=false
						}
					}
					return false;
				}
				else {
					document.getElementById(thisid).className="invisibleok";
					for (i=0;i<checkedfields.length;i++) {
						if (checkedfields[i]==thisid) {
							checkedfields_truefalse[i]=true
						}
					}
					return true;	
    			}
			case "text":
				if (value == "" || value == null){
					document.getElementById(thisid).className="isnotok";
					alert(errormessage)
					for (i=0;i<checkedfields.length;i++) {
						if (checkedfields[i]==thisid) {
							checkedfields_truefalse[i]=false
						}
					}
					return false;
				}
				else {
					document.getElementById(thisid).className="isok";
					for (i=0;i<checkedfields.length;i++) {
						if (checkedfields[i]==thisid) {
							checkedfields_truefalse[i]=true
						}
					}
					return true;	
    			}
			case "textarea":
				if (value == "" || value == null){
					document.getElementById(thisid).className="isnotok";
					alert(errormessage)
					for (i=0;i<checkedfields.length;i++) {
						if (checkedfields[i]==thisid) {
							checkedfields_truefalse[i]=false
						}
					}
					return false;
				}
				else {
					document.getElementById(thisid).className="isok";
					for (i=0;i<checkedfields.length;i++) {
						if (checkedfields[i]==thisid) {
							checkedfields_truefalse[i]=true
						}
					}
					return true;	
    			}
				break;
			default:
		}
	}
}

function check_email(fieldname,errormessage) {
	thisid=fieldname.id=fieldname.name
	with (fieldname) {
  		whereisat=value.indexOf("@");
  		whereisdot=value.lastIndexOf(".");
  		if (whereisat<1||whereisdot-whereisat<2) {
			alert(errormessage)
    		document.getElementById(thisid).className="isnotok";
			for (i=0;i<checkedfields.length;i++) {
				if (checkedfields[i]==thisid) {
					checkedfields_truefalse[i]=false
				}
			}
			return false;	
		}
  		else {
			document.getElementById(thisid).className="isok";
			for (i=0;i<checkedfields.length;i++) {
				if (checkedfields[i]==thisid) {
					checkedfields_truefalse[i]=true
				}
			}
			return true;	
  		}
  	}
}

function check_numbers(fieldname,errormessage) { 
	thisid=fieldname.id=fieldname.name
	with (fieldname) {
		var the_num_OK = false; 
		var the_num_test = "";
    	var the_num = document.getElementById(thisid).value;
	
		the_num_test = /^[0-9]+$/;
    	the_num_OK = the_num_test.test(the_num);

if (the_num_OK) {
			document.getElementById(thisid).className="isok";
			for (i=0;i<checkedfields.length;i++) {
				if (checkedfields[i]==thisid) {
					checkedfields_truefalse[i]=true
				}
			}
			return true;	
		}
		else {   
			alert(errormessage)
			document.getElementById(thisid).className="isnotok";
			for (i=0;i<checkedfields.length;i++) {
				if (checkedfields[i]==thisid) {
					checkedfields_truefalse[i]=false
				}
			}
	    	return false;
		}
	}
}

function check_final(formname) {
	var countfalse=0
	for (i=0;i<checkedfields.length;i++) {
		if (checkedfields_truefalse[i]==false) {
			alert(checkedfields[i]+" is not correct");
			countfalse++
		}
	}
	if (countfalse>0) {
		return false;
	}
	else {
		return true;
	}
}

</script>
<form name="anyname" action="submit.html" onsubmit="return check_final(this)" method="post">

<strong>email address:</strong><br>
<input type="text" name="email" class="isnotok" style="width:400px" onblur="return check_email(this,'email address:\nPlease enter a valid email address')"><br>
<font color="#777777">Validation: does the field contain a valid email address?</font>
<br><br>

<strong>ZIP:</strong><br>
<input type="text" name="ZIP" class="isnotok" style="width:400px" onblur="return check_numbers(this,'ZIP:\nOnly positive numbers and zero are allowed')"><br>
<font color="#777777">Validation: does the textfield contain numbers only?</font>
<br><br>

<strong>city:</strong><br>
<input type="text" name="city" class="isnotok" style="width:400px" onblur="return check_filledout(this,'city:\nPlease fill out the name of the city')"><br>
<font color="#777777">Validation: is the textfield filled out?</font>
<br><br>

<strong>sex:</strong><br>
<input type="radio" name="sex" value="Male" onclick="return check_filledout(this)">male <input type="radio" name="sex" fieldname="sex" value="Female" onclick="return check_filledout(this)">female<br>
<font color="#777777">Validation: has a radio button been selected?</font>
<br><br>

<strong>age:</strong><br>
<select name="age" size="7" onclick="return check_filledout(this)">
<option>0 - 15
<option>15 - 21
<option>21 - 30
<option>31 - 40
<option>41 - 50
<option>51 - 60
<option>Above 60
</select>
<br>
<font color="#777777">Validation: has an option been selected?</font>
<br><br>
<input type="submit" value="submit">

</form>

Step 2: Let's have a look at the sample form below, in order to set the mandatory form-fields.

<form name="anyname" action="submit.html" onsubmit="return check_final(this)" method="post">

email address:
<input type="text" name="email" class="isnotok" style="width:300px" onblur="return check_email(this,'email address:\nPlease enter a valid email address')">
Validation: does the field contain a valid email address?

ZIP:
<input type="text" name="ZIP" class="isnotok" style="width:300px" onblur="return check_numbers(this,'ZIP:\nOnly positive numbers and zero are allowed')">
Validation: does the textfield contain numbers only?

city:
<input type="text" name="city" class="isnotok" style="width:300px" onblur="return check_filledout(this,'city:\nPlease fill out the name of the city')">
Validation: is the textfield filled out?

comment:
<textarea name="comment" class="isnotok" rows="6" style="width:300px" onblur="return check_filledout(this,'comment:\nPlease enter your comment')"> </textarea>
Validation: is the textarea-field filled out?

sex:
<input type="radio" name="sex" value="Male" onclick="return check_filledout(this)">Male
<input type="radio" name="sex" value="Female" onclick="return check_filledout(this)">Female
Validation: has a radio button been selected?

age:
<select name="age" size="7" onclick="return check_filledout(this)">
<option>0 - 15
<option>15 - 21
<option>21 - 30
<option>31 - 40
<option>41 - 50
<option>51 - 60
<option>Above 60
</select>
Validation: has an option been selected?

<input type="submit" value="submit">

</form>

onsubmit="return check_final(this)"
The red element within <form>-tag calls the final validation check. It is absolutely mandatory! It should not be changed.

name="anyname"
Each field requires a unique name.

class="isnotok"
Each textfield and each textarea requires this class.
Do not change anything.
The class ist not required for type "radio" and "selection"

onblur="return check_email(this,'add your error message')
Use this if you want to apply an email validation check.
Can be used for field-type "text" or field "textarea".
Light green marks the text that appears when the email is not valid.

onblur="return check_filledout(this,'add your error message')"
Use this if you want to check whether the field is filled out.
Can be used for field-type "text" or field "textarea".
Light green marks the text that appears when the field is not filled out correctly.

onclick="return check_filledout(this)"
Use this for field-type "radio" and field-type "selection".
No comment reqeuired.

onblur="return check_numbers(this,'add your error message')"
Use this if you want to check whether the field consists of numbers only.
Can be used for field-type "text" or field "textarea".
Light green marks the text that appears when the field is not filled out correctly.

Step 3: Go between the <style>-tag </style>-tag and configure the style according to the instructions.

Step 4: Go on top of the <script>-code and enter the names of the form-fields (required fields only) according to the instructions.