HOW TO VALIDATE HTML FORM USING JAVASCRIPT

Share:
HOW TO VALIDATE HTML FORM USING JAVASCRIPT

Hello readers in this tutorial you will see how to validate a basic HTML form using JavaScript. Below i have created a simple HTML form with the following fields Username that should be minimum 6 and maximum 15 in length, First Name that should be minimum 3 and maximum 15 in length, Last Name hat should be minimum 3 and maximum 15 in length, Password hat should be minimum 6 and maximum 15 in length, Confirm Password hat should be equals to Password and Contact hat should be minimum 10 and maximum 10 in length.

See Below Example.
<html lang="en">
  <head>
      <title>My Registration Form</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     
      <style>
          #username,#fname,#lname,#password,#cpassword,#contact{
              width: 330px;
          }
          span{
              color:red;
          }
      </style>

   </head>
<body style="background-color:beige;"><br/><br/>
<form method="POST" action="SomeAction" name="myform" id="myform">
 <div class="container">
       <div class="form-group">
          <center>
            <h4>Create Account<br/></h4>
              <b>Username</b> <br/>
              <input type="text" class="form-control" id="username" name="username" placeholder="Username"  required="required"/>
              <span style="display:none" id="usernameError">Please Enter Valid Username Min 6 Max 15*</span>
             
              <b>Enter First Name</b><br/>
              <input type="text" class="form-control" id="fname" name="fname" placeholder="Enter First Name"  required="required"/>
              <span style="display:none" id="fnameError">Please Enter First Name Min 3 Max 15*</span>

              <b>Enter Last Name</b><br/>
              <input type="text" class="form-control" id="lname" name="lname" placeholder="Enter Last Name" required="required"/>
              <span style="display:none" id="lnameError">Please Enter Last Name Min 3 Max 15*</span>
      
              <b>Enter Password </b><br/>
              <input type="password" class="form-control" id="password" name="password" placeholder="Enter Password!"   required="required"/>
              <span style="display:none" id="passwordError">Password Should Be Min 6 Max 15 In Length*</span>

              <b>Confirm Password</b><br/>
              <input type="password" class="form-control" id="cpassword" name="cpassword" placeholder="Confirm Password" required="required" />
              <span style="display:none" id="cpasswordError">Password Mismatch*</span>
             
              <b>Enter Contact</b><br/>
              <input type="number" class="form-control" id="contact" name="contact" placeholder="Contact" required="required" />
              <span style="display:none" id="contactError">Please Enter Valid Contact Min 10 Max 10*</span>
      
             <br/>
             <button type="button" class="btn btn-primary" style="width:100px;" onclick="validateMyForm()">Submit</button>
       </center>
    </div>
 </div><!--End Of Container-->
</form>
    <script type="text/javascript">
        function validateMyForm(){
            document.getElementById('usernameError').style.display='none';
            document.getElementById('passwordError').style.display='none';
            document.getElementById('cpasswordError').style.display='none';
            document.getElementById('fnameError').style.display='none';   
            document.getElementById('lnameError').style.display='none';
            document.getElementById('contactError').style.display='none';

            if(document.getElementById('username').value.length < 6 || document.getElementById('username').value.length > 15){
              document.getElementById('usernameError').style.display='block';
            }
           
            else if(document.getElementById('fname').value.length < 3 ||document.getElementById('fname').value.length > 15){
               document.getElementById('fnameError').style.display='block';
           }
           
            else if(document.getElementById('lname').value.length < 3 ||document.getElementById('lname').value.length > 15){
               document.getElementById('lnameError').style.display='block';
           }
           
           else if(document.getElementById('password').value.length < 6 ||document.getElementById('password').value.length > 15){
               document.getElementById('passwordError').style.display='block';
           }
           
           else  if(document.getElementById('cpassword').value != document.getElementById('password').value){
               document.getElementById('cpasswordError').style.display='block';
           }
           
            else if(document.getElementById('contact').value.length < 10 ||document.getElementById('contact').value.length > 10){
               document.getElementById('contactError').style.display='block';
           }
            else {
                document.write('Form Submitted Successfully');
            }
        }
        </script>
  </body>
</html>

Try above example.


No comments

You May Like Also

Programming Knowledge


Java JDK
Reversing String in Java
Java Generic Concept With Simple Example
Java Generic Objects Behavior In Non-Generic Area
Creating Connection With MySql Databse Using Java Application
Performing Database Operations Java MySql Insert Update Delete Select
Java Inserting Data in MySql Databse Table
Java Basic Login System Using MySql Database Table
JSP Login System Using MySql Databse
Jsp Servlet Login And Logout System Using Mysql Database Table
What is jdk in Java?
Exaplain inheritance in Java with example?
Exaplain polymorphism in Java with example?
Exaplain abstraction in Java with example?
Exaplain encapsulation in Java with example?
What is the use of this keyword in Java?
Explain ArrayList With Example
Explain LinkedList With Example
Explain Vector Class With Example
Explain Vector Class With Example
Generics in java with example
Behavior of generic objects
How can i pass generic class to a method in java
How to create a login system in jsp using mysql database?
How to create a login and logout system in jsp & servlet using mysql database?
How to connection a simple Java application with mysql database?
How to insert values in mysql databse usiong Java applications?
Perform insertion, retrieval, updatation and delete operations?
How to create a simple login system in java using mysql database?

PHP Login System Using MySql Database
PHP Complete Login System With Session And Logout Using MySql Database