Registration Form Validation Example - HTML JAVASCRIPT ALERT BOX


Demo Registration Form

Male Female


* - Mandatory


HTML code: Demo Registration.html
<html >
<head>

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

</head>
<body>

<center>
<h1>Demo Registration Form</h1>
<form name="form1"  method="post" action="success.html">
 
<table border='0'>
 <tr>
  <td><LABEL for="firstname">First Name:<sup style="color:#F00">*</sup> </LABEL></td>
         <td><INPUT type="text" id="firstname"></td>
 </tr>
 <tr>
  <td><LABEL for="lastname">Last Name:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><INPUT type="text" id="lastname"></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>
 </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();i++)
    document.write("<option value='"+i+"'>" + i+"</option> ");
  </script>
  </select>
   
  </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>
  

 </tr>
 <tr>
  <td><LABEL for="contctno">Contact Number:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><INPUT type="text" id="contctno"></td>
 </tr>
 <tr>
  <td><LABEL for="email">Email:<sup style="color:red;">*</sup> </LABEL></td>
  <td><INPUT type="text" id="email"></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>
 </FORM></center>



</body>
</html>


Javascript code: validation.js
function validateForm()
{
 
 var x=document.forms["form1"]["firstname"];
 if (x.value=="")
   {
  alert("Please enter the First name.");
  x.focus();
  return false;
   }
 
 else if(x.value.length>20)
   {
   alert("First name cannot be greater than 20 characters.");
  x.value="";
  x.focus();
  return false;
   }
 else if ((!namepattern.test(x.value)))
   {
  alert("First name should contain only alphabets.");
  x.value="";
  x.focus();
  return false;
   }

 x=document.forms["form1"]["lastname"];
 if(x.value=="")
   {
  alert("Please enter the Last name.");
  x.focus();
  return false;
 } 
  else if(x.value.length>20)
   {
  alert("Last name cannot be greater than 20 characters.");
  x.value="";
  x.focus();
  return false;
 }
 else if (!namepattern.test(x.value))
   {
    alert("Last name should contain only alphabets.");
  x.value="";
  x.focus();
  return false;
 }

 if((document.form1.gender[0].checked==false)&&(document.form1.gender[1].checked==false))
 {
  document.form1.gender[0].focus();
  alert("Please select a gender.");
  return false;
 }
 var dd=document.form1.dd.value;
 var mmm=document.form1.mmm.value;
 var yyyy=document.form1.yyyy.value;
 if(!validdate(dd,mmm,yyyy))
 {
  return false;
 }
  
 x= document.getElementById("address");
 if(x.value==null || x.value=="" )
 {
  alert("Please enter the Address.");
  x.value="";
  x.focus();
  return false;
 }
 else if(x.value.length<20)
   {
  alert("Address should be greater than 20 characters.");
  x.value="";
  x.focus();
  return false;
 }

 x=document.form1.contctno;
 if(x.value=="")
 {
  alert("Please enter the Contact number.");
  x.value="";
  x.focus();
  return false;
 }
 else if(isNaN(x.value))
 {
  alert("Contact number should contain only digits.");
  x.value="";
  x.focus();
  return false;
 }
 else if(x.value.length!=10)
 {
  alert("Contact number should contain only 10 digits.(Mobile number)");
  x.value="";
  x.focus();
  return false;
 }
 else if(!phonepattern.test(x.value))
 {
  alert("Invalid Contact number.");
  x.value="";
  x.focus();
  return false;
 }

 x=document.form1.email;
 if(!emailpattern.test(x.value))
 {
  alert("Invalid email id.");
  x.value="";
  x.focus();
  return false;
 }

 if(confirm("Do you want to submit the form?"))
{
alert("Registration Form Submitted Successfully.");
}
else
return false;

}
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))
  {
   alert("Please select a valid date.");
   return false;
  }
  return true;
 }
 
 function confirmreset()
 {
  return confirm("Do you want to reset the form?");
 }

12 comments:

  1. Nice tutorial,really it is very helpful to users,here is a way to find html registration form with validation

    ReplyDelete
  2. Code is very good for beginners only this line is missing for check special characters in JavaScript section
    var namepattern = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

    ReplyDelete
  3. sir, where is the code of successs.html
    in line no 10

    ReplyDelete
  4. sir , i understand the whole concept of the form and js part but it is not working.
    Please help me out.

    ReplyDelete
  5. Thank you so much for sharing this worth able content with us. The concept taken here will be useful for my future programs and I will surely implement them in my study. Keep blogging article like this.
    safety course in chennai

    iosh course in chennai

    nebosh course in chennai

    fire and safety course in chennai

    industrial course in chennai

    best safety training in chennai

    ReplyDelete
  6. Hiiii...Thanks for sharing Great content...Nice post...Keep move on...
    Blockchain Training in Hyderabad

    ReplyDelete
  7. Thank you so much for this useful information. looking more from your side to update us on more updates and advancements

    ReplyDelete


  8. Thanks for sharing such a good content with us. keep share these kind of content.i would like to read more.
    JavaScript institute in Delhi

    ReplyDelete
  9. Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot. it is really explainable very well and i got more information from your blog.
    We are giving all Programming Courses such as You can

    Register for a free Demo Sessions

    RPA Ui Path Online Training
    Best Python Online Training
    Online AWS Training
    Online Data Science Training
    Hadoop Online Training

    ReplyDelete
  10. Thanks for sharing. A registered valuer is a person or an organisation that is registered with the bankruptcy board of India and insolvency as a valuer in agreement with companies. A Registered Valuer is a valuation expert who can assess the worth of stocks, bonds, intangible assets, and tangible assets. This concept was introduced in India by the companies act of 2013. It existed earlier as well but with no proper regulation. if you need Registered Valuer Consultants call 9310165114 or visit us Registered Valuer Consultants

    ReplyDelete
  11. TDS return filing in Mumbai is a vital financial obligation that requires precision and adherence to tax regulations. By staying informed, maintaining accurate records, and, if necessary, seeking professional assistance, individuals and businesses in Mumbai can ensure compliance with tax laws and contribute to the city's financial ecosystem.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...