Login Form Validation using HTML CSS & Jquery | Validation Login Form in bootstrap and jQuery

I will teach you How to Create Login Form Validation in HTML CSS & jQuery.

Login Form Validation using HTML CSS & Jquery | Create Validation Login Form in bootstrap and jQuery

Login Form validation is one of the most common web development tasks. There are many ways to do form validation, but jQuery is one of the best and easiest ways to write form validation.

In this tutorial , I will teach you How to Create Login Form Validation in HTML CSS & jQuery. after watch this tutorial you will have knew How to make Login form validation in jquery.

HTML with CDN Links

                            
                                <!doctype html>
<html lang="en">
<head>
  <title>Login form with validation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-primary">

  <div class="container mt-5 pt-5 d-flex justify-content-center">
    <div class="col-md-4 p-4 pb-4 bg-light">
      <form>
       <h2 class="text-center">Sign In</h2>
       <div >
         <label class="h5">Email:</label>
         <input type="text" class="form-control" id="email">
         <span class="text-success float-right mr-2" id="email_status"></span>

       </div>
       <div >
         <label class="h5 mt-4">Password:</label>
         <input type="password" class="form-control" id="pass">
         <span class="text-success float-right mr-2" id="pass_status"></span>
     <br>
     <a href="#" class="my-3 float-right mr-0">Forget Password ?</a>
       </div>
       <button class="btn btn-primary btn-block">LOGIN</button>
      </form>
    </div>
  </div>
</body>
</html>

Let's write Jquery for Validation

                            
                                $(document).ready(function(){
$("#email").keyup(function(){
  var regx_email = /^([a-zA-Z]+)([0-9]+)?(@)([a-zA-Z]{5,10}(.)([a-zA-Z]+))$/i;
  var email_inp = $(this).val();
  if (regx_email.test(email_inp)) {
    $("#email_status").text("valid");
    $("#email_status").removeClass("text-danger");
  }
  else {
    $("#email_status").addClass("text-danger");
    $("#email_status").text("Invalid");
  }
});
$("#pass").keyup(function(){
  var regx_pass = /^([a-zA-Z]+)([0-9]+)([$&+,:;=?@#|'<>.^*()%!-]+)$/i ;
  var pass = $(this).val();
  if (regx_pass.test(pass)) {
    $("#pass_status").text("valid");
    $("#pass_status").removeClass("text-danger");
  }
  else {
    $("#pass_status").text("Invalid");
    $("#pass_status").addClass("text-danger");
  }
});
});

Download Code Files

Share This Post :

8,200
Subscribers
2,400
Followers