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;
 }
Labels: , , , ,

7 comments:

  1. AnonymousApril 26, 2013 at 6:00 PM

    You may also visit privatejobshub.blogspot.in

    ReplyDelete
  2. RAISUDDINOctober 12, 2014 at 2:21 PM

    SUPER DEAR

    ReplyDelete
  3. UnknownOctober 9, 2015 at 7:00 PM

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

    ReplyDelete
  4. UnknownJune 4, 2018 at 10:43 AM

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

    ReplyDelete
  5. sasitamilFebruary 2, 2019 at 2:39 PM

    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
  6. the impossible gameMay 23, 2021 at 11:00 AM

    I don't want the suggestion form to suggest entering a name from the user's browser history, what should I do? Thanks!

    ReplyDelete
  7. UnknownMarch 18, 2022 at 12:20 PM

    Sensible post. I learn something totally new and testing on complaints I StumbleUpon constantly. It's persistently basic to inspect articles from various essayists and work on something from various fights.tamilrockers new

    ReplyDelete

Subscribe to: Post Comments (Atom)
Related Posts Plugin for WordPress, Blogger...