How to do Form Validation using Jquery?

Form validation using Jquery

Include the Jquery library and jquery.validate file.

Include below JS files


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

Script


$(document).ready(function(){
  $(function() {
 $("form[name='register-form']").validate({  
rules: {
         firstname: "required",
		  password: {
			required: true,
			minlength: 6
		  },
         email: {               
             required: true,
             email: true
         },
     },
messages: {
			firstname: "Enter First Name",
			 password: "Enter Passowrd",
			 email: "Enter Valid Email ID"
		},
		 submitHandler: function(form) {
			 form.submit();
		 }
 });

  });
})

Explanation:

Validate method will apply to form. By using validate method we can define two arrays like rules and messages. In the rules, we can set the validation conditions to accept the given input. In the messages part, we should define the validation messages to show when the user entered the detail wrongly.

Output

See the Pen Form validation using Jquery by Vinothkumar (@fedtutorial) on CodePen.0

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *