Form Validation Using InnerHTML - HTML JAVASCRIPT



FORM VALIDATION USING INNERHTML
HTML JAVASCRIPT

Demo Registration Form

Male Female


* - Mandatory
HTML CODE: REGISTRATION.HTML
<html >
<head>

<!--validation-->
<script typ="text/javascript" src="innerHTMLValidation.js" ></script>
     
</head>

<body>
<div class="container">
<div class="content">
 <center>
<form name="form1"  method="post" action="success.html">
 <fieldset>

<h1>Demo Registration Form</h1>
   <table border='0'>
 <tr>
  <td><LABEL for="firstname">First Name:<sup style="color:#F00">*</sup> </LABEL></td>
         <td><INPUT type="text" id="firstname"></td><td width="200px"><i style="color:red;" id="pointfn"></i></td>
 </tr>
 <tr>
  <td><LABEL for="lastname">Last Name:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><INPUT type="text" id="lastname"></td><td width="200px"><i style="color:red;" id="pointln"></i></td>
 </tr>
     
 <tr>
   <td><LABEL for="gender">Gender:<sup style="color:#F00">*</sup> </LABEL></td> <td><INPUT type="radio" name="gender" value="Male"> Male
   <INPUT type="radio" name="gender" value="Female"> Female</td><td width="200px"> <i style="color:red;" id="pointgendr"></i></td>
 </tr>
 <tr>
  <td><LABEL for="dob">Date of Birth:<sup style="color:#F00">*</sup> </LABEL></td>
  <td> 
  <select id="dd">
        <option value="dd">DD</option>
        <script type="text/javascript">
   for(var i=1;i<32;i++)
    document.write("<option value='"+i+"'>" + i+"</option> ");
   </script>
        </select>
                </select>
                 <select id="mmm">
         <option value="mmm">MMM</option>
         <option value="0">JAN</option>
         <option value="1">FEB</option>
         <option value="2">MAR </option>
         <option value="3">APR</option>
         <option value="4">MAY</option>
         <option value="5">JUN</option>
         <option value="6">JUL</option>
         <option value="7">AUG</option>
         <option value="8">SEP</option>
         <option value="9">OCT</option>
         <option value="10">Nov</option>
         <option value="11">DEC</option>
        </select>
        <select id="yyyy">
           <option value="yyyy"selected>YYYY</option>
        <script type="text/javascript">
   var dt= new Date();
   for(var i=1979;i<=dt.getFullYear()-18;i++)
    document.write("<option value='"+i+"'>" + i+"</option> ");
  </script>
  </select>
   </td><td width="200px"><i style="color:red;" id="pointdob"></i>
  </td>
 </tr>
 <tr>
  <td><LABEL for="address" style="text-align:left;">Address:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><textarea id="address"  name="address" rows="4" cols="20"></textarea></td><td width="200px"><i style="color:red;" id="pointadrs"></i>   
  </td>
  

 </tr>
 <tr>
  <td><LABEL for="contctno">Contact Number:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><INPUT type="text" id="contctno"></td><td width="200px"><i style="color:red;" id="pointcontct"></i></td>
 </tr>
 <tr>
  <td><LABEL for="email">Email:<sup style="color:red;">*</sup> </LABEL></td>
  <td><INPUT type="text" id="email"></td><td width="200px"><i style="color:red;" id="pointemail"></i></td>
 </tr>
 <tr>
  <td></td><td><br/><INPUT type="submit" onClick="return validateForm()" value="Submit">
  <INPUT type="reset" onClick="return confirmreset()"></td>
 </tr>
 
 <tr>
  <td></td><td style="font-size:12px;text-align:right;"><br/><i style="color:red;font-size:12px;align:right;" >* - Mandatory</i></td>
 </tr>
    </table>
<fieldset>
 </FORM></center>
 </div>
</div>


</body>
</html>

JAVASCRIPT CODE: innerHTMLValidation.js

 var namepattern=/^[a-zA-Z]+$/
 var phonepattern = /^\d{10}$/
 var emailpattern =/^[a-zA-Z][a-zA-Z0-9_]*(\.[a-zA-Z0-9_]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.([a-zA-Z]{2,4})$/
 var emailpattern2 =/^[a-zA-Z][a-zA-Z0-9_]*(\.[a-zA-Z0-9_]+)*$/
 var idpattern=/^\d{6}$/;

function validateForm()
{
 
 var x=document.forms["form1"]["firstname"];
 if (x.value=="")
   {
  
  document.getElementById('pointfn').innerHTML="Please enter the first name.";
    x.focus();
  return false;
   }
 
 else if(x.value.length>20)
   {
  x.value="";
  document.getElementById('pointfn').innerHTML="Please enter less than 20 characters.";
  x.focus();
  return false;
   }
 else if ((!namepattern.test(x.value)))
   {
  document.getElementById('pointfn').innerHTML="Please enter only alphabets.";
    x.value="";
  x.focus();
  return false;
   }

 document.getElementById('pointfn').innerHTML='';

 x=document.forms["form1"]["lastname"];

 if(x.value=="")
   {
  document.getElementById('pointln').innerHTML="Please enter the Last name.";
  x.focus();
  return false;
 } 
  else if(x.value.length>20)
   {
  x.value="";
  document.getElementById('pointln').innerHTML="Please enter less than 20 characters.";
  x.focus();
  return false;
 }
 else if (!namepattern.test(x.value))
   {
  x.value="";
  document.getElementById('pointln').innerHTML="Please enter only alphabets.";
  x.focus();
  return false;
 }
 document.getElementById('pointln').innerHTML="";
 if((document.form1.gender[0].checked==false)&&(document.form1.gender[1].checked==false))
 {
  document.form1.gender[0].focus();
  document.getElementById('pointgendr').innerHTML='Please select a gender.';
  return false;
 }
 document.getElementById('pointgendr').innerHTML='';
 var dd=document.form1.dd.value;
 var mmm=document.form1.mmm.value;
 var yyyy=document.form1.yyyy.value;
 if(!validdate(dd,mmm,yyyy))
 {
  document.getElementById('pointdob').innerHTML="Plaese select a valid date.";
  return false;
 }
  
 document.getElementById('pointdob').innerHTML="";
 x= document.getElementById("address");
 if(x.value==null || x.value=="" )
 {
  x.value="";
  document.getElementById('pointadrs').innerHTML="Please enter the address.";
  x.focus();
  return false;
 }
 else if(x.value.length<20)
   {
  x.value="";
  document.getElementById('pointadrs').innerHTML="Please enter atleast 20 characters.";
  x.focus();
  return false;
 }
 document.getElementById('pointadrs').innerHTML="";

 x=document.form1.contctno;

 if(x.value=="")
 {
  
  x.value="";
  document.getElementById('pointcontct').innerHTML="Please enter the contact number.";
  x.focus();
  return false;
 }
 else if(isNaN(x.value))
 {
  x.value="";
  document.getElementById('pointcontct').innerHTML="Please enter only digits.";
  x.focus();
  return false;
 }
 else if(x.value.length!=10)
 {
  x.value="";
  document.getElementById('pointcontct').innerHTML="Please enter only 10 digits.(Mobile number)";
  x.focus();
  return false;
 }
 else if(!phonepattern.test(x.value))
 {
  x.value="";
  document.getElementById('pointcontct').innerHTML="Please enter a valid contact number.";
  x.focus();
  return false;
 }
 document.getElementById('pointcontct').innerHTML="";

 x=document.form1.email;
 if(x.value=="")
 {
  x.value="";
  document.getElementById('pointemail').innerHTML="Please enter the email id.";
  x.focus();
  return false;
 }
 else if(!emailpattern.test(x.value))
 {
  x.value="";
  document.getElementById('pointemail').innerHTML="Please enter a valid email address.";
  x.focus();
  return false;
 }
 document.getElementById('pointemail').innerHTML="";
 return confirm("Do you want to submit the form?");
}
        function validdate(dd,mm,yyyy)
 {
  var dateobj = new Date(yyyy, mm, dd);
  var datecurrent= new Date();
  if((dateobj.getMonth()!=mm)||(dateobj.getDate()!=dd)||(dateobj.getFullYear()!=yyyy)||(dateobj>datecurrent))
  {
   return false;
  }
  return true;
 }
 
 function confirmreset()
 {
  if(confirm("Do you want to reset the form?"))
{
 document.getElementById('pointfn').innerHTML="";
 document.getElementById('pointln').innerHTML="";
 document.getElementById('pointgendr').innerHTML="";
 document.getElementById('pointdob').innerHTML="";
 document.getElementById('pointadrs').innerHTML="";
 document.getElementById('pointcontct').innerHTML="";
 document.getElementById('pointemail').innerHTML="";
 return true;
}
else
 return false;
 }

8 comments:

  1. its awesome logic, thnks...
    very usefull...

    ReplyDelete
  2. This is an amazing blog,it gives very helpful messages to us.Besides that Wisen has established as Best Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete
  3. It's really useful for me... Thank you very much...

    ReplyDelete
  4. After reading this web site I am very satisfied simply because this site is providing comprehensive knowledge for you to audience.
    Thank you to the perform as well as discuss anything incredibly important in my opinion. We loose time waiting for your next article writing in addition to I beg one to get back to pay a visit to our website in



    selenium training in Bangalore
    selenium training in Marathahalli
    selenium training in Btm layout
    selenium training in Jaya nagar
    selenium training in Electronic city
    selenium training in Kalyan nagar

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...