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


You can leave a response, or trackback from your own site.

Leave a Reply