Home » Support » Help Articles » Validate A Form using jQuery

Validate A Form using jQuery

Back to Help Articles Home


Validating HTML forms is a very important aspect during form submission. jQuery helps in validating forms at client side. The following steps are required to validate a form.

    Step 1: Create a Simple HTML Form

  1. To create the form use the following code.

    <h1>Fill out your information</h1>
    <form id="regForm" method="post">
      <input type="text" name="fullname" id="fullname" placeholder="Your Full Name"/>
      <input type="text" name="email" id="email" placeholder="Email ID"/>
      <input type="text" name="mobileno" id="mobileno" id="mobileno" placeholder="Mobile Number" maxlength="10"/>
      <input type="text" name="address" id="address" placeholder="Address"/>
      <input type="password" name="password" id="password" value="" placeholder="Password"/>
      <input type="password" name="repassword" id="repassword" value="" placeholder="RetypePassword"/>
      <button name="submit" type="button" id="btnvalidate">Click to Submit</button>
    </form>
    

    Figure One

  2. Step 2: Include the Latest jQuery Library

  3. The latest jquery library can be downloaded from https://jquery.com/. Add the latest library to the head section of HTML page.
  4. Step 3: Add a Function to Validate Form

  5. Add the jquery function within the "<script>" tags in the HTML form. Use the following code to validate the form.

    <script type="text/javascript">
    
      //Find the values added in form using the id of each fields. The ".val()" function finds the value added in the form fields.
      var fullname = $('#fullname').val();
      var address = $('#address').val();
      var mobileno = $('#mobileno').val();
      var email = $('#email').val();
      var indexat = email.indexOf("@"); //Index of "@" in the email field
      var indexdot = email.indexOf("."); //Index of "." in the email field
      var password = $('#password').val();
      var repassword = $('#repassword').val();
      
      //Function will execute when the button "Click to Submit" is clicked.
      $('#btnvalidate').click(function() {
    	  
        //Blank field validation of fullname, mobile no and address. The function will generate an alert message if "fullname" or "mobile no" or "address" field is blank  
        if(fullname == '')
        {
    	  alert('Please enter your Full Name');
    	  $('#fullname').focus(); //The focus function will move the cursor to "fullname" field
        }
        else if(address == '')
        {
    	  alert('Please enter your Address');
    	  $('#address').focus();
        }
        else if(mobileno == '')
        {
    	  alert('Please enter your Mobile Number');
    	  $('#address').focus();
        }
        
        //Validation of valid email address. The function will generate an alert message if "email" field is blank or incorrect
        else if(indexat < 1 || (indexdot-indexat) < 2)
        {
    	  alert('Please enter a valid Email Id');
    	  $('#email').focus();
        }
        
        //Validation of password. The function will generate an alert message if "password" field is not same as "retype password".
        else if(password == '' && password != repassword)
        {
    	  alert('Password and Retype password donot match');
    	  $('#repassword').focus();
        }
      });
      
    </script>
    



Updated on Aug 31, 2016

The techReview is an online magazine by Batoi and publishes articles on current trends in technologies across different industry verticals and areas of research. The objective of the online magazine to provide an insight into cutting-edge technologies in their evolution from labs to market.

Visit techReview


English - IN (USD)
New Users? Signup.     Existing Users? Login.