ADVERTISEMENT
Validate Email and Password with Jquery

JQuery Form Validation, Email and Password

One of the most convenient ways to validate an HTML form is validation from the client-side. Today we are going to learn how to validate email and password using JQuery.

One of the main reason that you must validate all HTML forms with jquery is; it gives your visitors a good user experience as it does not require page load.

Prerequisites

This tutorial requires any version of jquery.

To validate email and password with JQuery, we are going to do 2 things:

  1. Check if Email is Valid
  2. Check if password length falls in a certain rage.

Checking if Email is Valid with JQuery

Every valid email must contain two characters, i.e. ‘@‘ and a dot(.). A good example of a valid email is, “[email protected]“. The work of JQuery in validating email is to check if the email contains @ and dot, if those two characters are present, the system will treat that string as a valid email.

Also Read:

  1. How to Print Any Div Content with Jquery
  2. How to Create JQuery Count Down Timer

Check if Password Length Falls in a Certain Rage.

When validating password it’s good to allow a rage of certain characters in your password. You don’t want robots to type strings with millions of characters or someone to enter a too short password. For example, in our case, our password must be between 5 and 16 characters. Anything out of that rage will be considered invalid.

The following code illustrates how you can validate Email and Password with JQuery



<!DOCTYPE html>
<html>
<head>
  <title>Form validation, Email and Password</title>
  <script src="jquery.js"></script>
  <script>
    $(function(){
      $("#loginBtn").click(function(){
        var  email = $("#email").val(); 
        var password = $("#password").val(); 

        // now lets validate email
        // examples of valid emails are:
        // [email protected]
        // [email protected]
        // [email protected], in short a valid email should be ([email protected])

        if(email.indexOf("@") < 0 || email.indexOf(".") < 0){
          alert("Invalid email"); 
          // email must contain @ and dot(.)
          return; 
        }

        // validate password
        // allow password to be between 5 and 16 characters
        if( !(password.length >= 5 && password.length <= 16) ){
          // this simply means, if password is not in the range of 5 to 16, show an error
          alert("Password must be between 5 and 16 characters"); 
          return; 
        }

        document.write("Good Your validation is successful");

      });
    });
  </script>
</head>
<body>
  <div>
    <form action="" method="post" onsubmit="return false; ">
      <ul>
        <li>Eail: <input type="text" name="email" id='email' /></li><br />
        <li>Password: <input type="text" name="password" id='password' /></li><br />
        <li><input type="submit" value="Login" id='loginBtn' /></li>
      </ul>
    </form>
  </div>
</body>
</html>