jQuery Form Validation Custom Error Message

To validate a form data and add custom error message on client side before send to the form data on server; In this tutorial, we are going to show how to validate form data with adding error custom message on client side using the jQuery form validator plugin.

jQuery Form Validation Custom Error Message

The jQuery provide several plugins for validating a diffrent diffrent types of form data on client side and also add error message using the plugin. In this form validation tutorial, we will discuss advance form validation using jQuery validator() method and add custom error message using the jquery plugin.

Create one html form
Keep jQuery cdn in form
Write validation rules
output

Create one html form

In this step, we need to create one html file. And inside this file we will create some fields like firstname, lastname, email, phone number, password.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Validation Using validator()</title>
<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>
<style>
  .error{
    color: red;
  }
  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="phone">Phone</label>
    <input type="text" name="phone" id="phone" placeholder="8889988899"><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>

Keep jQuery cdn in form

Now we need to put the jQuery library cdn plugin in form. In otherwords, To use jQuery Validation Plugin we 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>

Write validation rules

Next, we need to write some validation rules with custom error message in script tag. Below we have written this advance rules for validating a form data before send to the server. The validate() method is used to validate a form based on the selector provided.

<script>
$(document).ready(function(){
  $("#registration").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },      
      phone: {
        required: true,
        digits: true,
        minlength: 10,
        maxlength: 10,
      },
      password: {
        required: true,
        minlength: 5,
      }
    },
    messages: {
      firstname: {
      required: "Please enter first name",
     },      
     lastname: {
      required: "Please enter last name",
     },     
     phone: {
      required: "Please enter phone number",
      digits: "Please enter valid phone number",
      minlength: "Phone number field accept only 10 digits",
      maxlength: "Phone number field accept only 10 digits",
     },     
     email: {
      required: "Please enter email address",
      email: "Please enter a valid email address.",
     },
    },
 
  });
});
</script>

output

jQuery Form Validation Using validator()

Registration

To Remember

required – Makes the element required. remote – Requests a resource to check the element for validity. minlength – Element requires a minimum length. maxlength – Element requires a maximum length. min – Element is required to be given the minimum. max – Element is required to be given the maximum. stespan – Elements require a given stespan. email – Element requires a valid email url – Element require a valid url date – Element require a date. number – Element require a decimal number. digits – Element require digits only.

jQuery Form Validation Custom Error Message