Javascript Form Validation

Posted: March 29, 2011 in Form, Uncategorized
Tags: , , , ,

Here is really very simple and smart JavaScript form validation. This is quite simple to use, understand and modify the validations as required.

Here you can find validation for every type of needed fields and various methods like:

  • Checking for Empty Fields
  • Numeric Inputs (like Phone Number, Pin Number etc.)
  • Alphabet Inputs (like Name)
  • Alphabet and Numeric both inputs in one field (Like Address)
  • Character Length in both the ways as minimum and maximum
  • Email Validations
  • Checking Selection for Dropdown List

Javascript Form Validation

Combined JavaScript for Form Validation
function formValidator(){
	// Make quick references to our fields
	var name = document.getElementById('name');
	var address = document.getElementById('address');
	var zip = document.getElementById('zip');
	var state = document.getElementById('state');
	var username = document.getElementById('username');
	var email = document.getElementById('email');
	
	// Check each input in the order that it appears in the form!
	if(isAlphabet(name, "Please enter only letters for your name")){
		if(isAlphanumeric(address, "Numbers and Letters Only for Address")){
			if(isNumeric(zip, "Please enter a valid zip code")){
				if(madeSelection(state, "Please Choose a State")){
					if(lengthRestriction(username, 6, 8)){
						if(emailValidator(email, "Please enter a valid email address")){
							return true;
						}
					}
				}
			}
		}
	}
	
	
	return false;
	
}

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 Choose"){
		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;
	}
}

HTML markup for Form Validation
<form onsubmit="return formValidator()" >
First Name: <input type="text" id="name" /><br />
Address: <input type="text" id="address" /><br />
Zip Code: <input type="text" id="zip" /><br />
State: <select id="state">
	<option>Please Choose</option>
	<option>AL</option>
	<option>CA</option>
	<option>TX</option>
	<option>WI</option>
</select><br />
Username(6-8 characters): <input type="text" id="username" /><br />
Email: <input type="text" id="email" /><br />
<input type="submit" value="Check Form" />
</form>

Resource : Tizag.com

Advertisements
Comments
  1. Ravi says:

    Hi Ashish,
    This is very good validation method in simple way of JavaScript code,
    Keep it up 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s