jQuery Registration Form validation using Validator

jquery registration form validation; Through this tutorial, i am going to show you how to validate form before submit using jquery validator.

Registration Form Validation using jQuery

  • Create html form
  • Include jQuery cdn in form
  • Implement validation rules

Create html form

Create one html file and then inside this file; create some fields like firstname, lastname, email, password; as shown below:

<!DOCTYPE html>
<html>
<head>
<style>
  label,
  input,
  button {
    border: 0;
    margin-bottom: 3px;
    display: block;
    width: 100%;
  }
 .common_box_body {
    padding: 15px;
    border: 12px solid #28BAA2;
    border-color: #28BAA2;
    border-radius: 15px;
    margin-top: 10px;
    background: #d4edda;
}
</style>
</head>
<body>
<div class="common_box_body test">
  <h2>Registration</h2>
  <form action="#" name="registration" id="registration">
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"><br>
    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"><br>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="[email protected]"><br>
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder=""><br>
    <input name="submit" type="submit" id="submit" class="submit" value="Submit">
  </form>
</div>
</body>
</html>

Include jQuery cdn in form

Include jQuery library cdn plugin in form. In otherwords, To use jQuery Validation Plugin you need to include cdn library of jQuery validation plugin.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>

Implement validation rules

Implement some validation rules in script tag for validating a form data before send or submit to the server. As shown below:

<script>
$(document).ready(function(){
  $("#registration").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
 
  });
});
</script>

Your Registration form will look like with jquery validation

jQuery Form validator()

Registration





Recommended jQuery Tutorials

Leave a Comment