Form Validation with JS

One of the important elements in form design is the implementation of form validation.  This helps to ensure that the data being submitted is cleaned and that the user enters the required information that you want for the form.  If you do not include any type of validation on your form, then it is possible to get corrupt data or open your form for possible hacking attempts.

To create a great form validation system, there are four steps to implementation:

1. Make sure each of your fields have an id attribute.
2. Include the validation functions within the heading of your page.
3. Create a unique validation function for your form.
4. Add the validation code to the onSubmit attribute of the form.

Validation Functions

We have created several functions that can be used to help with the validation of a form.  These functions will check to see if the field is empty, check to see if the field is numeric, check to see if the field is alpha numeric, check the length of the field, check to see if an item has been selected, and check to see if a valid e-mail address has been entered.

Add the following functions within a javascript section within the heading:

function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus(); // set the focus to this input
		return false;
	}
	return true;
}

function isNumeric(elem, helperMsg){
	var numericExpression = /^[0-9]+$/;
	if(elem.value.match(numericExpression)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function isAlphanumeric(elem, helperMsg){
	var alphaExp = /^[0-9a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function lengthRestriction(elem, min, max){
	var uInput = elem.value;
	if(uInput.length >= min && uInput.length <= max){
		return true;
	}else{
		alert("Please enter between " +min+ " and " +max+ " characters");
		elem.focus();
		return false;
	}
}

function madeSelection(elem, helperMsg){
	if(elem.value == "Please Select"){
		alert(helperMsg);
		elem.focus();
		return false;
	}else{
		return true;
	}
}

function emailValidator(elem, helperMsg){
	var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
	if(elem.value.match(emailExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

Unique Validation Function for the Form

You will not have to look at each of the fields that you want to validate, and create a function that is called when the form is submitted.  The following is an example of how this will work.

function validateForm() {

 var valid = false;
	
 var subcat = document.getElementById('subcat');
 var name = document.getElementById('Name');
 var email = document.getElementById('email');
 var linkText = document.getElementById('linkText');
 var linkURL = document getElementById('linkURL');
 var siteDescription = document.getElementById('siteDescription');
 var reciprocalPage = document.getElementById('reciprocalPage');

 if(notEmpty(subcat, "You need to select a category.")){
  if(notEmpty(name, "You need to provide your name.")){
   if(emailValidator(email, "You need to provide your e-mail.")){ 
    if(notEmpty(linkText, "You need to provide a title for your link.")){ 
     if(notEmpty(linkURL, "You need to provide a URL for your link.")){ 
      if(notEmpty(siteDescription, "You need to provide a description for your site.")){ 
       if(notEmpty(reciprocalPage, "You need to provide the URL to the page you placed our link.")){ 
        valid=true;
       }
      }
     }
    }
   }
  }
 }	

 return valid;

}

Explanation:

Here is the flow as to how this function works…

1. The variable valid is set to false.
   
2. The value of the fields you want to validate are assigned to variables.
   
3. The nested condition statement goes through each variable and validates the fields calling the appropriate functions.
   
4. The function then returns the valid status back to the form.  If the status is true, it is submitted.  If the status is false, then a window pops up and tells the user what they need to correct in order to submit the form.

Adding the validation function to your form

The last thing you have to do is add the validation call to a “OnSubmit” attribute of your form.

<form action="post.php" 
   name="myform" 
   method="post" 
   onsubmit="return validateForm();">

Now when the submit button is clicked, the validation system should check the fields you want validated.