Form Validation in jQuery

Demo :

Example :

The following example shows, how to validate a registration form using jquery.
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Form Validation</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"     >
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body class="bg-info">

<div class="container">
 <div class="row mt-4">
  <div class="col-md-8 mx-auto">
   <div class="card">
    <div class="card-body">
     <h3>Form Validation</h3><hr>
     <form action="" id="submitform">
      <div class="form-group">
       <label for="email">Username:</label>
       <input type="text" class="form-control"   placeholder="Enter Name" name="username" id="username">
       <span class="text-danger" id="usernameError"></span><br>
      </div>
      <div class="form-group">
       <label for="email">Email:</label>
       <input type="email" class="form-control"  placeholder="Enter email" name="email" id="email">
       <span class="text-danger" id="emailError"></span><br>
      </div>
      <div class="form-group">
       <label for="email">Phone No:</label>
       <input type="text" class="form-control"  placeholder="Enter Phone No" name="phone" id="phone">
       <span class="text-danger" id="phoneError"></span><br>
      </div>
      <div class="form-group">
       <label for="pwd">Password:</label>
       <input type="password" class="form-control"   placeholder="Enter password" name="password" id="password">
       <span class="text-danger" id="passwordError"></span><br>
      </div>
      <div class="form-group">
       <label for="pwd">Confirm Password:</label>
       <input type="password" class="form-control"   placeholder="Enter password" name="cpassword" id="cpassword">
        <span class="text-danger" id="cpasswordError"></span><br>
      </div>
      <button type="submit" class="btn btn-success">Submit</button>
     </form>
    </div>    
   </div>
  </div>
 </div>
</div>

<script>
$(document).ready(function () {
  $("#submitform").submit(function (event) {
      // Clear previous error messages
      $(".error").html("");
  
      // Validate username
      var username = $("#username").val();
      if (username === "") {
          $("#usernameError").html("Username is required");
          event.preventDefault();
      }
  
      // Validate email
      var email = $("#email").val();
      emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (email === "") {
          $("#emailError").html("Email is required");
          event.preventDefault();
      } else if (!emailReg.test(email)) {
          $("#emailError").html("Enter a valid email address");
          event.preventDefault();
      }
      
      // Validate Phone
      var phone = $("#phone").val();
      phoneReg = /^[0-9]{10}$/;
      if (phone === "") {
          $("#phoneError").html("Phone Number is required");
          event.preventDefault();
      } else if (!phoneReg.test(phone)) {
          $("#phoneError").html("Enter 10 digit number");
          event.preventDefault();
      }
      
      // Validate password
      var password = $("#password").val();
      if (password === "") {
          $("#passwordError").html("Password is required");
          event.preventDefault();
      } else if (password.length < 6) {
          $("#passwordError").html("Password must be at least 6 characters");
          event.preventDefault();
      }
      
      // Validate Conform password
      var cpassword = $("#cpassword").val();
      if (cpassword === "") {
          $("#cpasswordError").html("Password is required");
          event.preventDefault();
      } else if (cpassword!=password) {
          $("#cpasswordError").html("Password must be same as above password");
          event.preventDefault();
      }
      
  });          
});
</script>
    
</body>
</html>
Try it Yourself