Login Form Validation Using HTML, CSS & jQuery

Learn how to create a login form validation system using HTML, CSS, Bootstrap, and jQuery.

Login Form Validation Using HTML, CSS & jQuery

Login Form Validation Using HTML, CSS, Bootstrap & jQuery

This Login Form Validation project is built using HTML, CSS, Bootstrap, and jQuery to create a professional authentication form with client-side validation. The form checks user input before submission and displays helpful error messages, ensuring a better user experience and improved form accuracy.

The project uses Bootstrap for responsive design and jQuery for form validation functionality. Users receive instant feedback when fields are left empty or contain invalid data. The layout is fully responsive, making it suitable for desktops, tablets, and mobile devices while maintaining a clean and modern appearance.

Steps to Create a Login Form Validation System

Follow these simple steps to build a responsive login validation form:

Create a project folder, for example, login-form-validation.
Inside the folder, create three files: index.html and jquery.js.
Design the login form structure using HTML and Bootstrap.

                            
                                <!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->

<!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>

<script src="jquery.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>

Add jQuery to handle form validation functionality. Validate input fields such as email and password before form submission. Display user-friendly error messages for invalid or empty fields. Save the files and open the project in a browser to test the validation system.

                            
                                <script>
// put validations using jquery

$(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");

      }
    });





});
</script>

Download Code Files