Oct 17, 2012

HTML form validation using JavaScript


To download code - Click here



To view demo click Register button







 




 



 







Step 1



Create one HTML file named index.html and paste the following code and save it.




 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>Code from www.jijokjose.com</title>


</head>


 


<body>


<div align="center">


<form action="#" method="get" name="f1" onsubmit="return check_all()">


 


  <table width="440" border="0" cellspacing="0" cellpadding="0">


    <tr>


      <th height="32" colspan="4" scope="col">User Registration Information</th>


      </tr>


    <tr>


      <th width="99" scope="col">&nbsp;</th>


      <th width="10" scope="col">&nbsp;</th>


      <th width="168" scope="col">&nbsp;</th>


      <th width="163" scope="col">&nbsp;</th>


      </tr>


    <tr>


      <th height="35" align="left" valign="middle" scope="row">Username</th>


      <td align="left" valign="middle"><strong>:</strong></td>


      <td align="left" valign="middle"><label for="username"></label>


        <input type="text" name="username" id="username" /></td>


      <td align="left" valign="middle"><span style="color:#F00;" id="e_username"></span> </td>


      </tr>


    <tr>


      <th height="33" align="left" valign="middle" scope="row">Password</th>


      <td align="left" valign="middle"><strong>:</strong></td>


      <td align="left" valign="middle"><input type="text" name="password" id="password" /></td>


      <td align="left" valign="middle"><span style="color:#F00;" id="e_password"></span></td>


      </tr>


    <tr>


      <th height="34" align="left" valign="middle" scope="row">Mobile No</th>


      <td align="left" valign="middle"><strong>:</strong></td>


      <td align="left" valign="middle"><input type="text" name="mobile" id="mobile" /></td>


      <td align="left" valign="middle"><span style="color:#F00;" id="e_mobile"></span></td>


      </tr>


    <tr>


      <th height="34" align="left" valign="middle" scope="row">Email</th>


      <td align="left" valign="middle"><strong>:</strong></td>


      <td align="left" valign="middle"><input type="text" name="email" id="email" /></td>


      <td align="left" valign="middle"><span style="color:#F00;" id="e_email"></span></td>


      </tr>


    <tr>


      <th align="left" valign="middle" scope="row">&nbsp;</th>


      <td align="left" valign="middle">&nbsp;</td>


      <td align="left" valign="middle">&nbsp;</td>


      <td align="left" valign="middle">&nbsp;</td>


      </tr>


    <tr>


      <th colspan="4" scope="row"><input type="submit" name="button" id="button" value="Register" /></th>


      </tr>


    <tr>


      <th scope="row">&nbsp;</th>


      <td>&nbsp;</td>


      <td>&nbsp;</td>


      <td>&nbsp;</td>


      </tr>


  </table>


</form>


</div>


<script type="text/javascript">


 


function check_all()


{


if(document.forms["f1"]["username"].value=="")


{


e_username.innerHTML="Enter username";


alert("Please fill username !!");


return false;


}


else if(document.forms["f1"]["username"].value!="")


{


var numaric = document.forms["f1"]["username"].value;


for(var j=0; j<numaric.length; j++)


{


  var alphaa = numaric.charAt(j);


  var hh = alphaa.charCodeAt(0);


  if((hh > 47 && hh<58) || (hh > 64 && hh<91) || (hh > 96 && hh<123) || (hh == 95) || (hh == 46))


  {


 


  }


else


{


e_username.innerHTML="Invalid characters";


alert("Invalid characters !!");


return false;


  }


  }


}


 


if(document.forms["f1"]["password"].value=="")


{


e_username.innerHTML="";


e_password.innerHTML="Enter password";


alert("Please fill password !!");


return false;


}


else if(document.forms["f1"]["password"].value!="")


{


var pass= document.forms["f1"]["password"].value;


n=pass.length;


 


if(n < 6)


{


e_password.innerHTML="Min length 6";


alert("Minimum password length 6");


return false;


}


}


 


if(document.forms["f1"]["mobile"].value=="")


{


e_username.innerHTML="";


e_password.innerHTML="";


e_mobile.innerHTML="Enter mobile";


alert("Please fill mobile!!");


return false;


}


else if(document.forms["f1"]["mobile"].value!="")


{


numaric = document.forms["f1"]["mobile"].value;


for(var j=0; j<numaric.length; j++)


{


  var alphaa = numaric.charAt(j);


  var hh = alphaa.charCodeAt(0);


if((hh > 47 && hh<58) || (hh == 43) )


  {


  }


else


{


                e_mobile.innerHTML="Invalid mobile number";


alert("Invalid phone number!!");


return false;


  }


  }


}


 


if(document.forms["f1"]["email"].value=="")


{


e_username.innerHTML="";


e_password.innerHTML="";


e_mobile.innerHTML="";


e_email.innerHTML="Enter email";


alert("Please fill email !!");


return false;


}


else if(document.forms["f1"]["email"].value!="")


{


e_username.innerHTML="";


e_password.innerHTML="";


e_mobile.innerHTML="";


var x = document.forms["f1"]["email"].value;


var atpos=x.indexOf("@");


var dotpos=x.lastIndexOf(".");


if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)


  {


  e_email.innerHTML="Not a valid email";


alert("Not a valid e-mail address !!");


  return false;


  }


}


 


{


e_username.innerHTML="";


e_password.innerHTML="";


e_mobile.innerHTML="";


e_email.innerHTML="";


var r=confirm("Are you sure want to submit the data..!! ");


 


if (r==true)


  {


  return true;


  }


else


  {


  return false;


  }


}


}


 


</script>


</body>


</html>






Step 2



Open index.html using any web browser and click Register button





To download code - Click here




No comments:

Post a Comment