This time I will share jQuery Plugin and tutorial about Flexible Full-featued Form Validation Plugin – jQuery Validaty, hope it will help you in programming stack.
Validaty is a simple, flexible jQuery form validation plugin which applies most commonly used validators to your existing form fields using HTML5 data
attributes.
Key features:
- Balloon or list style message to show the erros
- Bind via form
- Helper methods inside the plugin
- Highlight for valid and invalid fields
- Option to choose which field will be focused when validation fails
- Support to declare the trigger of the validation inline with ‘on:’ key
- Method to call the validation on form;
- Method to destroy the Validaty’s bind;
- Method to get the validators
Validators:
- Must contain
- Date ISO
- Digits
- E-mail
- Equal
- Max Check
- Max Length
- Max Select
- Min Check
- Min Length
- Min Select
- Number
- Range Length
- Range Number
- Required
- URL
- Username
How to use it:
1. Include jQuery library and the jQuery Validaty’s core JavaScript file on your html page.
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "lib/jquery.validaty.js" ></ script > |
2. The plugin comes with a couple of validation rules ready to be used and declared in the file jquery.validaty.validators.js
.
1 |
< script src = "lib/jquery.validaty.validators.js" ></ script > |
3. Don’t forget to include the core style sheet in the header of the html page.
1 |
< link rel = "stylesheet" href = "lib/jquery.validaty.css" > |
4. Add the ‘data-validaty’ attribute to your form fields to be validated.
2 |
< input type = "text" data-validaty = "validator_name" > |
5. Attach the plugin to the form element and done.
6. There are two different styles of how the message will be displayed, the default balloon and the list. The list style will be appended after the invalid field. If it is checkbox or radio with the same name, will be appended after the last one.
7. More options with default values.
04 |
errorTarget: undefined, |
16 |
ignore: ':submit, :reset, :image, :disabled' , |
8. API.
02 |
$( 'form' ).validaty( 'helper' ); |
05 |
$( 'form' ).validaty( 'validator' ); |
08 |
$( 'form' ).validaty( 'valid' ); |
11 |
$( 'form' ).validaty( 'validate' ); |
14 |
$('form ').validaty(' destroy'); |
9. Helpers:
02 |
helper.getParams(input); |
05 |
helper.isCheckable(input); |
08 |
helper.isDateISO(value); |
11 |
helper.isDigits(value); |
14 |
helper.isEmail(value); |
17 |
helper.isNumber(value); |
23 |
helper.isUsername(value); |
Change log:
2017-07-08
- v0.5.2: Removes class valid and invalid before each validation to avoid invalid valid class.
2017-07-07
- Added callback options errorTarget where you receive the field and message and decide what to do with that.
This awesome jQuery plugin is developed by wbotelhos. For more Advanced Usages, please check the demo page or visit the official website.