Learn Web Development: Full Form Validation in Javascript

<html>
    <head>
        <title>script form</title>
        <script type="text/javascript">
            function val()
            {
                var count=0;
              var name=  document.getElementById("n").value;
              var n1=/^[a-z A-Z]{5,10}$/;
             // alert('name');
             if(name=="")
             {
                 document.getElementById("error").innerHTML="please fill the blank";
                 count++;
             }
             else  if(!n1.test(name))
             {
                 //alert('please fill the blank');
                 //document.write("please fill the blank");
                 document.getElementById("error").innerHTML="Invalid Name";
                // return false;
                count++;
                 
             }
             else
             {
                 //alert(name);
                 //  document.write("success");
                 document.getElementById("error").innerHTML="";
             }
             
                  var contact=document.getElementById("contact").value;
                  var c1=/^[0-9]{10}$/;
                  if(contact=="")
                  {
                      document.getElementById("error1").innerHTML="please fill the blank";
                      count++;
                  }
                  
                  else if(!c1.test(contact))
                  {
                     document.getElementById("error1").innerHTML="invalid conatct"; 
                    // return false;
                     count++;
                  }
                  else
                  {
                      document.getElementById("error1").innerHTML=""; 
                  }


                   var email=document.getElementById("email").value;
                   var e1=/^[a-z A-Z 0-9 _ .]+@[a-z A-Z]+\.[a-z A-Z]{2,4}$/;
                   if(email=="")
                   {
                       document.getElementById("error2").innerHTML="please fill the blank";
                   }
                  else if(!e1.test(email))
                  {
                     document.getElementById("error2").innerHTML="Invali Email"; 
                    // return false;
                     count++;
                  }
                  else
                  {
                      document.getElementById("error2").innerHTML=""; 
                  }


                  var username=document.getElementById("username").value;
                  var u1=/^[a-z A-Z 0-9 _ . @]{4,10}$/;
                  if(username=="")
                  {
                      document.getElementById("error3").innerHTML="please fill the blank";
                      count++;
                      
                  }
                  else if(!u1.test(username))
                  {
                     document.getElementById("error3").innerHTML="Invalid username"; 
                    // return false;
                     count++;
                  }
                  else
                  {
                      document.getElementById("error3").innerHTML=""; 
                  }


                  var password=document.getElementById("password").value;
                  var p1=/^[a-z A-Z 0-9 _ . @]{4,10}$/;
                  if(password=="")
                  {
                      document.getElementById("error4").innerHTML="please fill the blank";
                      count++;
                  }
                 else if(!p1.test(password))
                  {
                     document.getElementById("error4").innerHTML="Invalid password"; 
                    // return false;
                     count++;
                  }
                  else
                  {
                      document.getElementById("error4").innerHTML=""; 
                  }


                   var confirmpassword=document.getElementById("cpass").value;
                   var cp1=/^[a-z A-Z 0-9 _ . @]{4,10}$/;
                  if(confirmpassword=="")
                  {
                     document.getElementById("error5").innerHTML="please fill the blank"; 
                    // return false;
                     count++;
                  }
                 else if(confirmpassword!=password)
                  {
                      document.getElementById("error5").innerHTML="password not matched";
                      count++;
                  }
                  else
                  {
                      document.getElementById("error5").innerHTML=""; 
                  }
              
                  
                  if(count>0)
                  {
                      return false;
                  }
                  else
                  {
                      alert("Jo Baka Thai Gayu Ne!")
;                  }
            }
        </script>
    </head>
    <body>
        <form method="post" >
        <table align="center" border="1" cellspacing="1" cellpadding="4" bgcolor="#FFFF00">
            <tr>
                <td>Name</td>
                <td><input type="text" id="n" name="n"><b id="error" style="color: red; padding-left: 5px;"></b></td>
            </tr>
              <tr>
                <td>Contact</td>
                <td><input type="text" id="contact" name="contact"><b id="error1" style="color: red; padding-left: 5px;"></b></td>
            </tr>
             <tr>
                <td>Email</td>
                <td><input type="text" id="email" name="email"><b id="error2" style="color: red; padding-left: 5px;"></b></td>
            </tr>
            <tr>
                <td>UserName</td>
                <td><input type="text" id="username" name="username"><b id="error3" style="color: red; padding-left: 5px;"></b></td>
            </tr>
             <tr>
                <td>Password</td>
                <td><input type="password" id="password" name="password"><b id="error4" style="color: red; padding-left: 5px;"></b></td>
            </tr>
            <tr>
                <td>ConformPassword</td>
                <td><input type="password" id="cpass" name="cpass"><b id="error5" style="color: red ; padding-left: 5px;"></b></td>
            </tr>
            
             <tr>
                <td align="center" colspan="2"><input type="submit" id="submit" name="submit" value="Submit" onClick="return val()"></td>
            </tr>
            
             <tr>
                <td align="center" colspan="2"><input type="Reset" id="Reset" name="Reset" value="Reset"></td>
            </tr>
            
        </table>
        </form>
        
    </body>
    
</html>
Learn Web Development

Wednesday, December 14, 2016

Full Form Validation in Javascript

No comments:

Post a Comment
