This time I will share jQuery Plugin and tutorial about Powerful Multi-Functional Form Validation Plugin – jQuery Validation, hope it will help you in programming stack.
jQuery Validation is a javascript based plugin that helps you implement a powerful client side validator to your form elements that validate the value (like name, email, address, etc..) your user input when submitting.
You might also like:
Table of Contents:
Installation:
2 |
$ npm install jquery-validation |
5 |
$ bower install jquery-validation |
How to use it:
For more advanced usages, please check our more example pages listed below.
1. Include jQuery library and the jquery.validate.js
JavaScript file in the HTML document.
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
4 |
< script src = "/path/to/dist/jquery.validate.min.js" ></ script > |
6 |
< script src = "/path/to/dist/additional-methods.min.js" ></ script > |
8 |
< script src = "/path/to/dist/messages_LANGUAGE.min.js" ></ script > |
9 |
< script src = "/path/to/dist/methods_LANGUAGE.min.js" ></ script > |
2. Validate your HTML form on keyup and submit.
01 |
< form class = "cmxform" id = "signupForm" method = "get" action = "" > |
03 |
< legend >Validating a complete form</ legend > |
05 |
< label for = "firstname" >Firstname</ label > |
06 |
< input id = "firstname" name = "firstname" type = "text" > |
09 |
< label for = "lastname" >Lastname</ label > |
10 |
< input id = "lastname" name = "lastname" type = "text" > |
13 |
< label for = "username" >Username</ label > |
14 |
< input id = "username" name = "username" type = "text" > |
17 |
< label for = "password" >Password</ label > |
18 |
< input id = "password" name = "password" type = "password" > |
21 |
< label for = "confirm_password" >Confirm password</ label > |
22 |
< input id = "confirm_password" name = "confirm_password" type = "password" > |
25 |
< label for = "email" >Email</ label > |
26 |
< input id = "email" name = "email" type = "email" > |
29 |
< label for = "agree" >Please agree to our policy</ label > |
30 |
< input type = "checkbox" class = "checkbox" id = "agree" name = "agree" > |
33 |
< label for = "newsletter" >I'd like to receive the newsletter</ label > |
34 |
< input type = "checkbox" class = "checkbox" id = "newsletter" name = "newsletter" > |
36 |
< fieldset id = "newsletter_topics" > |
37 |
< legend >Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</ legend > |
38 |
< label for = "topic_marketflash" > |
39 |
< input type = "checkbox" id = "topic_marketflash" value = "marketflash" name = "topic" >Marketflash |
41 |
< label for = "topic_fuzz" > |
42 |
< input type = "checkbox" id = "topic_fuzz" value = "fuzz" name = "topic" >Latest fuzz |
44 |
< label for = "topic_digester" > |
45 |
< input type = "checkbox" id = "topic_digester" value = "digester" name = "topic" >Mailing list digester |
47 |
< label for = "topic" class = "error" >Please select at least two topics you'd like to receive.</ label > |
50 |
< input class = "submit" type = "submit" value = "Submit" > |