Simple Client-side Form Validation Plugin For jQuery - Validator
File Size: | 254 KB |
---|---|
Views Total: | 9517 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Validator is a brand new jQuery form validation plugin that that makes it easy to add validation to existing form elements. Support mostly HTML/HTML5 standard input type attributes and custom validation rules & error messages.
How to use it:
1. Include jQuery JavaScript library and the jQuery Validator plugin in your project.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="dist/validator.js"></script>
2. Apply validation rules to your form elements.
$('input').validator({ // rules, options and callbacks });
3. Validation rules available.
$('input').validator({ // Types number: email: url: date: // Attributes required: min: max: minlength: maxlength: pattern: // Customs range: rangelength: equalto });
4. Default settings.
$('input').validator({ // Type: Object /* e.g.: { minlength: 8, maxlength: 16 } or { rangelength: [8, 16] } or { rangelength: { message: 'Please enter a value between 8 and 16 characters long.', validator: function (value) { return /^.{8,16}$/.test(value); } } } */ rules: null, // The event(s) which triggers validating // Type: String trigger: '', // Filter the value before validate // Type: Function filter: null, // A shortcut of "success.validator" event // Type: Function success: null, // A shortcut of "error.validator" event // Type: Function error: null });
5. Default error messages.
// Types number: 'Please enter a valid number (only digits).', email: 'Please enter a valid email address.', url: 'Please enter a valid URL.', date: 'Please enter a valid date.', // Attributes required: 'This field is required.', max: 'Please enter a value less than or equal to [0].', min: 'Please enter a value greater than or equal to [0].', maxlength: 'Please enter no more than [0] characters.', minlength: 'Please enter at least [0] characters.', pattern: 'Please enter a matched value.', // Customs range: 'Please enter a value between [0] and [1].', rangelength: 'Please enter a value between [0] and [1] characters long.', equalto: 'Please enter the same value again.'
6. Public methods.
// Update rule(s) from element attributes to validator instance. $input.validator('update'); // addRule(name, value) $().validator('addRule', 'required', true); // removeRule(name) $().validator('removeRule', 'required'); // addValidator(name, value) $().validator('addValidator', 'required', function (value) { return !!value; }); $().validator('addValidator', { required: function (value) { return $.trim(value) !== ''; } }); // removeValidator(name) $().validator('removeValidator', 'required'); // Start a validation and return the reversed result. isInvalid(); // A shortcut of isValid method, means "√". v(); // A shortcut of isInvalid method, means "×". x(); // Destroy the validator and remove the instance from target element. destroy()
Change log:
v0.1.0 (2016-04-30)
- Added a new method: "update".
- The priority of rules option is greater than element attributes now.
- Improved event binding.
- Improved code style.
- Improved documentation.
This awesome jQuery plugin is developed by fengyuanchen. For more Advanced Usages, please check the demo page or visit the official website.