JavaScript Validation for HTML Forms

Studge — Tue, 10 Apr 2007 13:07:19 +0000

One of the most frustrating things with using forms on a site is getting back bad information in your results. Probably the most common instance is when a user enters a bad email address, such as webmaster#studgecom. We can utilize JavaScript to check for composition error such as this and to make sure that certain, required fields are filled in.

First, we are going to write up a simple form that requests a user's name, email address and favorite color. Here is the essence of the form:


  
    Form for JavaScript Validation - 1st version
  

  
    
    	Name:

	Email address:

	Favorite color:

You can try it here. It sends the form data to a PHP script named jstest.php. This script merely displays the information that the user put into the form. Here is code for it:

" . $_POST['name'] . "
";
  echo "We will contact you at " . $_POST['email'] .
    " regarding the color " . $_POST['color'] . "";
?>

As it is written now, the form provides no sort of validation and the user can submit anything or nothing in the availabe fields. So we need to write a JavaScript script to handle the validation. We will require the user to input their name, email address and favorite color. The user must also input the email address in a valid format. We will call this file jstest.js and here is what it looks like:

function validate_required(field,alerttxt) {
	with (field) {
		if (value==null||value=="") {
			alert(alerttxt);
			return false;
		}
		else {
			return true;
		}
	}
}

function validate_email(field,alerttxt) {
	with (field) {
		apos=value.indexOf("@")
		dotpos=value.lastIndexOf(".")
		if (apos<1||dotpos-apos<2) {
			alert(alerttxt);
			return false;
		} else {
			return true;
		}
	}
}

function validate_form(thisform) {
	with (thisform) {
		if (validate_required(name,"Please specify your name!")==false) {
			name.focus();
			return false;
		}
		if (validate_required(email,"Email must be filled out!")==false) {
			email.focus();
			return false;
		}
		if (validate_email(email,"Not a valid e-mail address!")==false) {
			email.focus();
			return false;
		}
		if (validate_required(color,"Forgot favorite color!")==false) {
			color.focus();
			return false;
		}
	}
}

Now we have a script to validate the form, but it does nothing until we implement it into the form's code. Here is the full form code (sans styling):



  



  
    Name:

    Email address:

    Favorite color:

You can try the finished, with validation, here. You should be able to adapt the above code to your specific form needs.

Studge » JavaScript

JavaScript Validation for HTML Forms