Convenient HTML5 Form Validation Plugin For jQuery - validation.js
File Size: | 52.6 KB |
---|---|
Views Total: | 1618 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A convenient form validation plugin that provides a convenient means to implement client-side validation on common HTML input fields. It supports validating any input element that supports the use of the jQuery $('#element_id').val();
or $('#element_id).is(':checked');
methods. The plugin supports Unicode text, including emails that use Unicode characters. This plugin is released under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).
Basic usage:
1. Add the jQuery validation.js plugin to your webpages like this:
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/validation.min.js"></script>
2. In order to use the plugin, you must supply certain attributes and classes in your form tags.
- Required CSS Class: validate; Rquired tag attribute: id
- Optional CSS Classes: allow-empty, check-length, check-email, check-match, numbers-only, letters-only, alphanumeric-only, is-checked
<form name="sample_form" action="#" method="post" id="sample_form"> <div> <input type="text" name="your_name" id="your_name" placeholder="Enter your name." class="validate letters-only allow-spaces check-length" data-validation-length-min="3" data-validation-length-max="100"> <div id="your_name-message" class="error-message hidden">You must enter a name between 3 and 100 characters.</div> </div> <div> <input type="text" name="email" id="email" placeholder="Enter your email." class="validate check-email" data-error-message="You must enter a valid email address."> <div id="email-message" class="error-message hidden"></div> </div> <div> <input type="checkbox" name="my_checkbox" id="my_checkbox" class="validate is-checked" data-error-message="This box must be checked."> <div id="my_checkbox-message" class="error-message hidden"></div> Check this box. </div> <button type="submit" name="form_submit" id="form_submit">Submit</button> </form>
3. To enable the validation plugin, you must call a plugin method to bind it to either an HTML form or a container element that contains a collection of input elements.
// Bind to an HTML form var flagIfCorrect = true; // Add the correct-alert class to a correctly filled input element. $.validation.bindOnSubmit('sample_form', flagIfCorrect); // Bind to an HTML container var flagIfCorrect = true; // Add the correct-alert class to a correctly filled input element. var returnClass = 'my-class'; // When you have a form where all fields are not validated, but you would like // the the form to submit when a user presses return in one of these non-required inputs. var callbackFunction = function () { console.log('Hello dere!'); } // A function for submitting the form or whatever // callback you prefer. var functionArgs = ['arg1','arg2']; // An argument for the callback function. Need more than one argument? // Make the argument an array and process that array as arguments from // within your function. // Catch when a user hits the return key in an input field. $.validation.bindOnReturn('sample_form', flagIfCorrect, returnClass, callbackFunction, functionArgs); var formEvent = 'click'; // click, submit, etc. var eventElementId = 'submit_form'; // In this case, we're listening for a click event on a button with the ID submit_form // Catch the submit button click and call submit function $.validation.bind('sample_form', 'click', 'submit_form', flagIfCorrect, callbackFunction, functionArgs);
4. There are two useful plugin properties that you can use in your on scripts to check if validation has been run on the form and if the inputs passed validation.
- $.validation.ran: Contains a boolean value. Boolean true if validation ran on the form, boolean false if not.
- $.validation.passed: Contains a boolean value. Boolean true if all inputs passed validation, boolean false if not.
// Example usage: if ($.validation.ran && $.validation.passed) { // do something }
Change log:
2016-06-05
- Removed an unnecessary object property.
2016-05-31
- Code cleanup. Added support for allow-empty class
2016-05-24
- added bindBlur function
This awesome jQuery plugin is developed by sbe1. For more Advanced Usages, please check the demo page or visit the official website.