JavaScript Form Validations :

FORM VALIDATION :

Below is sample code for form validation

Index.jsp:

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

  
     
    < title > Index Page < / title >
< script type="text/javascript" >
 
 function checkEmpty(){
    //alert('in a empty..');
    var fname = document.form1.fn.value;
    var lname = document.form1.ln.value;
 	var mobile = document.form1.mobile.value;
 	var email = document.form1.email.value;
 	
    
    //alert(fname);
    if(fname==""){
 		alert('Firstname can not be empty');
 		document.form1.fn.focus(); //to focus on that text box
 		return false;
 	}else if(lname==""){
 		alert('Lastname can not be empty');
 		document.form1.ln.focus();
 		return false;
 	}else if(mobile==""){
 		alert('Mobile can not be empty');
 		document.form1.mobile.focus();
 		return false;
 	}
 	else if(email==""){
 		alert('Email can not be empty');
 		document.form1.email.focus();
 		return false;
 	}
}
function validfn(){
 	var fname = document.form1.fn.value;
 	
 	var letters = /^[A-Za-z]+$/;
 	if(fname.match(letters)){
 		return true;
 	}else if(fname.length>1){
 		alert('Fname must have letters only');
 		document.form1.fn.value="";
 		document.form1.fn.focus();
 		return false;
 	
 	}
 }
function validln(){
 	var lname = document.form1.ln.value;
 	
 	var letters = /^[A-Za-z]+$/;
 	if(lname.match(letters)){
 		return true;
 	}else if(lname.length>1){
 		alert('Lname must have letters only');
 		document.form1.ln.value="";
 		document.form1.ln.focus();
 		return false;
 	
 	}
 }
function validmobile(){
  	var mobile = document.form1.mobile.value;
  	var numbers = /^[0-9]+$/;
  	
  	if(mobile.match(numbers)){
  		if(mobile.length==10){
  			return true;
  		}else{
  		 alert('mobile must be 10 digit');
  			document.form1.mobile.value="";
  		    document.form1.mobile.focus();
  			return false;
  		}
  	}
  	else if(mobile.length>1){
  		alert('Mobile must have numbers only');
  		document.form1.mobile.value="";
  		document.form1.mobile.focus();
  		return false;
  	}
 } 
function validmail(){
	var email = document.form1.email.value;
	var at=email.indexOf("@");
	var dot=email.indexOf(".");
	//alert('@:'+at);
	//alert('dot:'+dot);
	
	if(at<1 || dot=email.length){
		document.form1.email.value="";
		document.form1.email.focus();
		alert('not a valid emial');
		return false;	
	}
	else{
	 return true;
	}
}
< / script >
< / head >

  
< / script >
  < body > < center >
    < form action="success.jsp" name="form1" > 
     
  < br > < br >First Name : < input type="text" name="fn" onchange="validfn()" > < br > < br >
  
  Last Name : < input type="text" name="ln" onchange="validln()" > < br > < br >
  
  Mobile No. : < input type="text" name="mobile" onchange="validmobile()"> < br > < br >
  
  Gender : Male< input type="radio" name="gender" checked="checked" >
  		   Female < input type="radio" name="gender"> < br > < br >
  
  Email : < input type="text" name="email" onchange="validmail()" > < br > < br >
  
  City  : < select name="city" >
  			< option value="" > Select City < / option >
  			< option value="Pune" selected="selected" > Pune < / option >
 			< option value="Mumbai" > Mumbai < / option > 
  		  < / select > < br > < br >
 
  < input type="submit" value="Submit" onclick="return checkEmpty()" >
    < / form >
    
 < / centre > < / body >
< / html >