Hello friends! Today we are going to talk about how to use jquery validator plugin. Some of you might have heard about jquery validator plugin but some not. So for all your preference there is a jquery plugin called jquery validator. It is based on jquery. We can use it to do the validation. Most of you know when we create web application we have to do validation. Basically form validations. We can use this plugin to do those very easily. But how to use jquery validator plugin. That’s what we will see today. Let’s start the tutorial.
Post Outline
- How to get jquery validator
- Validating forms with jquery validator
- How to write jquery rules
- How to customize jquery plugin error messages
- Tips
- How to submit form data with jquery validator plugin
- Examples
- Conclusion
How to get jquery validator plugin
Jquery validator plugin is a free plugin. You all mostly using jquery for your development. For that you are downloading the jqueryy and add .js file into script tag. Like that you have to include validator.js file to your project.
Validating forms with jquery validator
There many things you needed to know when validating. There are so many functions for validation. You can learn them by reading jquery website documentation.
How to write jquery rules
To validate forms we have to write rules. First we have to start the validation function and then inside it we have to write rules. Then we can write rules for each input fields. For that we have to use input field name. For a specific field we can use different validations. There are a field call required. This will check whether the field is required or not. If the field is required then form submission won’t happen. For email you can use email field with true attribute. It will check the email properties. Other than that min length and max length also you can validated by using this.
Radio buttons and check box, select box also can validate by using the same method. The best thing is if we put as field as required when form submission it will show error message. In that case what happen is a label with error message will bind to the code at the execution time. If you inspect your code you can see it. For this you have to submit the form with empty input.
How to customize jquery validation plugin error messages
Earlier I told you we don’t have to write error messages separately inside labels or span. From the plugin it will bind the error messages. But If we want to customize the error messages. We can do that. After define rules we can write messages. For separate separate checking items we can write error messages.
Tips
When using jquery validator plugin. You can’t use normal button for form submission. Therefore for form submit you have to use a submit button. And also you have to give form name, id and form method. Whether it is GET or POST.
How to submit form data with jquery validator
We can submit form data using jquery when we using jquery validate plugin. It’s simple all you have to do is after messages you have to write submit handler. There you can type the function name. Below that you can create the function separately. Inside the function you can use the AJAX method to pass data to backend as usual.
Examples
$("#formid").validate({
rules:{
txtempname:{
required:true
}
},
messages:{
txtempname:{
required:"Please enter employee name"
}
},
highlight:function(element){
$(element).closest('.form-group');
$(element).addClass('has-error');
},
unhighlight:function(element){
$(element).closest('.form-group');
$(element).removeClass('has-error');
},
submitHandler: addemployee
});
function addemployee(){
//ajax code
}
Conclusion
With this I am concluding the post. Hope you have understand How to use jquery validator plugin. And also how to use it for write custome error messages and do AJAX data passing and all. We will meet again with another interesting post till then goodbye!
Well explained. Thanks a lot
Thanks for the good article, I hope you continue to work as well.
I truly appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You’ve made my day! Thanks again
Thank you so much keep reading us.
Thanks for your marvelous posting! I seriously enjoyed reading it, you can be a great author.I will make sure to bookmark your blog and may come back at some point. I want to encourage one to continue your great job, have a nice afternoon!
Thank you.