Powerful Multi Functional Form Validation Plugin jQuery Validation - Free Download Powerful Multi-Functional Form Validation Plugin - jQuery Validation

Free Download Powerful Multi-Functional Form Validation Plugin – jQuery Validation

Posted on

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.

Powerful Multi Functional Form Validation Plugin jQuery Validation - Free Download Powerful Multi-Functional Form Validation Plugin - jQuery Validation
File Size: 1.37 MB
Views Total: 12985
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

1 # NPM
2 $ npm install jquery-validation
3  
4 # Bower
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.

1 <!-- jQuery -->
2 <script src="/path/to/cdn/jquery.min.js"></script>
3 <!-- Core -->
4 <script src="/path/to/dist/jquery.validate.min.js"></script>
5 <!-- Additional Methods -->
6 <script src="/path/to/dist/additional-methods.min.js"></script>
7 <!-- Local -->
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="">
02   <fieldset>
03     <legend>Validating a complete form</legend>
04     <p>
05       <label for="firstname">Firstname</label>
06       <input id="firstname" name="firstname" type="text">
07     </p>
08     <p>
09       <label for="lastname">Lastname</label>
10       <input id="lastname" name="lastname" type="text">
11     </p>
12     <p>
13       <label for="username">Username</label>
14       <input id="username" name="username" type="text">
15     </p>
16     <p>
17       <label for="password">Password</label>
18       <input id="password" name="password" type="password">
19     </p>
20     <p>
21       <label for="confirm_password">Confirm password</label>
22       <input id="confirm_password" name="confirm_password" type="password">
23     </p>
24     <p>
25       <label for="email">Email</label>
26       <input id="email" name="email" type="email">
27     </p>
28     <p>
29       <label for="agree">Please agree to our policy</label>
30       <input type="checkbox" class="checkbox" id="agree" name="agree">
31     </p>
32     <p>
33       <label for="newsletter">I'd like to receive the newsletter</label>
34       <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
35     </p>
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
40       </label>
41       <label for="topic_fuzz">
42         <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
43       </label>
44       <label for="topic_digester">
45         <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
46       </label>
47       <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
48     </fieldset>
49     <p>
50       <input class="submit" type="submit" value="Submit">
51     </p>
52   </fieldset>