The simpliest jQuery form validation

Let's start with the following simple example

First Name:
Last Name:
Url:
Number:
Email:
Confirm

To achieve this we need to use the following scripts and css

1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
3. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
4. <link href="https://jqueryvalidation.org/files/demo/css/screen.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<link href="https://jqueryvalidation.org/files/demo/css/screen.css" rel="stylesheet">

Create a simple form

   

      First Name:
      

      Last Name:
      

      Url:
      

      Number:
      

      Email:
      

      Confirm
      

      
   

1. <form class="cmxform" id="myform">
2. <fieldset>
3. <label for="firstname">First Name:</label>
4. <input id="firstname" name="firstname">
6. <label for="lastname">Last Name:</label>
7. <input id="lastname" name="lastname">
9. <label for="url">Url:</label>
10. <input id="url" name="url">
12. <label for="number">Number:</label>
13. <input id="number" name="number">
15. <label for="email">Email:</label>
16. <input id="email" name="email">
18. <label for="confirm">Confirm</label>
19. <input class="checkbox" id="confirm" name="confirm" type="checkbox">
21. <input class="submit" type="submit" value="Validate">
22. </fieldset>
23. </form>

<form class="cmxform" id="myform">
   <fieldset>
      <label for="firstname">First Name:</label>
      <input id="firstname" name="firstname">

      <label for="lastname">Last Name:</label>
      <input id="lastname" name="lastname">

      <label for="url">Url:</label>
      <input id="url" name="url">

      <label for="number">Number:</label>
      <input id="number" name="number">

      <label for="email">Email:</label>
      <input id="email" name="email">

      <label for="confirm">Confirm</label>
      <input class="checkbox" id="confirm" name="confirm" type="checkbox">

      <input class="submit" type="submit" value="Validate">
   </fieldset>
</form>

And finally the javascript code. The 'validate' method contains the set of rules and messages. Messages are used for change default error messages.

1. <script>
2. $( "#myform" ).validate({
3. rules: {
4. firstname: {
5. required: true,
6. minlength: 3
7. },
8. lastname: {
9. required: true,
10. minlength: 3
11. },
12. url: {
13. required: true,
14. url: true
15. },
16. number: {
17. required: true,
18. number: true
19. },
20. email: {
21. required: true,
22. email: true
23. },
24. password: {
25. required: true,
26. minlength: 6
27. },
28. confirm_password: {
29. required: true,
30. minlength: 6,
31. equalTo: "#password"
32. },
33. confirm: "required"
34. },
35. messages: {
36. firstname: {
37. required: "First Name is required",
38. minlength: "First Name must me 3 characters at least"
39. },
40. lastname: {
41. required: "Last Name is required",
42. minlength: "Last Name must me 3 characters at least"
43. },
44. }
45. });
46. </script>

<script>
$( "#myform" ).validate({
  rules: {
    firstname: {
      required: true,
      minlength: 3
    },
    lastname: {
      required: true,
      minlength: 3
    },
    url: {
      required: true,
      url: true
    },
    number: {
      required: true,
      number: true
    },
    email: {
      required: true,
      email: true
    },
    password: {
      required: true,
      minlength: 6
    },
    confirm_password: {
      required: true,
      minlength: 6,
      equalTo: "#password"
    },
    confirm: "required"
  },
  messages: {
    firstname: {
      required: "First Name is required",
      minlength: "First Name must me 3 characters at least"
    },
    lastname: {
      required: "Last Name is required",
      minlength: "Last Name must me 3 characters at least"
    },
  }
});
</script>

To create custom validation rule we can add the following code:

jQuery.validator.addMethod('customValidation1', customFunction1);
jQuery.validator.addMethod('customValidation2', customFunction2);
jQuery.validator.addMethod('genderValidation', function(value, element, arg){
   return value != arg;
});

function customFunction1(){
   //Some logic
   return true;
}

function customFunction2(){
   //Some logic
   return false;
}

1. jQuery.validator.addMethod('customValidation1', customFunction1);
2. jQuery.validator.addMethod('customValidation2', customFunction2);
3. jQuery.validator.addMethod('genderValidation', function(value, element, arg){
4. return value != arg;
5. });
7. function customFunction1(){
8. //Some logic
9. return true;
10. }
12. function customFunction2(){
13. //Some logic
14. return false;
15. }

jQuery.validator.addMethod('customValidation1', customFunction1);
jQuery.validator.addMethod('customValidation2', customFunction2);
jQuery.validator.addMethod('genderValidation', function(value, element, arg){
   return value != arg;
});

function customFunction1(){
   //Some logic
   return true;
}

function customFunction2(){
   //Some logic
   return false;
}

And now use 'customValidation1' and 'customValidation2' as rules

$( "#myform1" ).validate({
  rules: {
    field1: {
      customValidation1: true
    },
    field2: {
      customValidation2: true
    },
    gender:{
      genderValidation: 'Animal'
    }
  },
  messages: {
    field1: {
      customValidation1: 'Custom validation 1 failed'
    },
    field2: {
      customValidation2: 'Custom validation 2 failed'
    },
    gender: {
      genderValidation: 'Hey, you cannot be an animal!'
    }
  }
});

1. $( "#myform1" ).validate({
2. rules: {
3. field1: {
4. customValidation1: true
5. },
6. field2: {
7. customValidation2: true
8. },
9. gender:{
10. genderValidation: 'Animal'
11. }
12. },
13. messages: {
14. field1: {
15. customValidation1: 'Custom validation 1 failed'
16. },
17. field2: {
18. customValidation2: 'Custom validation 2 failed'
19. },
20. gender: {
21. genderValidation: 'Hey, you cannot be an animal!'
22. }
23. }
24. });

$( "#myform1" ).validate({
  rules: {
    field1: {
      customValidation1: true
    },
    field2: {
      customValidation2: true
    },
    gender:{
      genderValidation: 'Animal'
    }
  },
  messages: {
    field1: {
      customValidation1: 'Custom validation 1 failed'
    },
    field2: {
      customValidation2: 'Custom validation 2 failed'
    },
    gender: {
      genderValidation: 'Hey, you cannot be an animal!'
    }
  }
});

It should look like this:

Field1
Field2
Gender: Male Female Animal

To get more information ref this link
https://jqueryvalidation.org/