Javascript Form Validation

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

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