ACJavascripts.com - Free Javascripts - Counters

Home - Free Javascripts - Tutorials - Tools - Templates - Forums

Home -> Tutorials -> Validating Forms With Javascript

Title: Validating Forms Using Javascript
Author: Aaron Connelly
Website: CYWebmasters.com (Click for more resources!)

Email This script to your friends!

Many programmers these days forget one of the most important rules of internet programming. NEVER - EVER trust users input!

So, in this tutorial I will show you how to use Javascript to your advantage and use instant form validation.

First lets start this tutorial by creating a form. This form will include First Name and Email Address fields.

Now that we have our forum designed lets go ahead and create our Javascript validation function.

We now have our skelleton function lets create a variable that will hold the form name.

Next lets validate the First name field. To do this we will use 2 methods. 1. First lets check to see if the field is empty. 2. Make sure the user is not trying to hack the system be inputing elligal characters.

function validateMyForm(){

var doc=document.myform;

//Before we start to chec, lets initialize a varible called "illegalChars"
//This variable will hold all the characters users will NOT be allowed to type in.

//List of invalid Characters.
var invalidChars = '\/\'\\ ";:?!()[]\{\}^|';

//First lets make sure the field is not empty.

//If statement - If the first Name field is empty do the following
if(doc.firstName.value==""){

//The first name field is empty - Send an alert to tell the user.
alert("Please be sure to type in your First Name.");

//Place the users cursur into the First Name Textbox.
doc.firstName.focus();

//Return false - This tells the form NOT to submit.
return false;
}

//Now lets make sure the user is not typing in any illegal characters.

//Run a for loop to scan all the characters within the First Name field.
for (i=o; i<invalidChars.length; i++) {
	if (doc.firstName.indexOf(invalidChars.charAt(i),0) > -1){
	//Alert the user that they are using an Illegal Character.
	alert("Please do not use an Illegal character in your First Name.");
	
	//Lets erase the information typed by the user.
	doc.firstName.value="";

//Now lets place the users cursur back into the First Name field.
	doc.firstName.focus();

//Tell the form NOT to submit.
	return false;
	}
    }

}

//-->
</script>

Now that we have completed our check for the First Name field, lets move on to validating the Email Address. I will now show the code to validate an Email Address then will place it into the above code we just wrote.

Now lets add the above email validation code into our form validating function.

function validateMyForm(){

var doc=document.myform;

//Before we start to chec, lets initialize a varible called "illegalChars"
//This variable will hold all the characters users will NOT be allowed to type in.

//List of invalid Characters.
var invalidChars = '\/\'\\ ";:?!()[]\{\}^|';

//First lets make sure the field is not empty.

//If statement - If the first Name field is empty do the following
if(doc.firstName.value==""){

//The first name field is empty - Send an alert to tell the user.
alert("Please be sure to type in your First Name.");

//Place the users cursur into the First Name Textbox.
doc.firstName.focus();

//Return false - This tells the form NOT to submit.
return false;
}

//Now lets make sure the user is not typing in any illegal characters.

//Run a for loop to scan all the characters within the First Name field.
for (i=0; i<invalidChars.length; i++) {
	if (doc.firstName.value.indexOf(invalidChars.charAt(i),0) > -1){
	//Alert the user that they are using an Illegal Character.
	alert("Please do not use an Illegal character in your First Name.");
	
	//Lets erase the information typed by the user.
	doc.firstName.value="";

//Now lets place the users cursur back into the First Name field.
	doc.firstName.focus();

//Tell the form NOT to submit.
	return false;
	}
    }

//First lets create a filter variable. This will hold all the characters
//needed to validate an Email Address.
var filter=/^.+@.+\..{2,3}$/

//Now lets check the filter.
if(filter.test(doc.emailAddress.value)){
//Email Is Valid
}else{
//Email is NOT valid
alert("Please be sure to type in a Valid Email Address.");
//Erase the email they typed.
doc.emailAddress.value="";
//Place the users cursur back into the field.
doc.emailAddress.focus();

//tell the form NOT to submit.
return false;
}

//The form has been validated - Return true telling it to submit.
return true;

}

//-->
</script>

Your All Done! Enjoy!