Robust Modular HTML5 Form Validation Plugin - Form Validator
File Size: | 245 KB |
---|---|
Views Total: | 4040 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A robust, flexible, customizable and modular form validator that supports both native HTML5 form validation features and custom validation rules.
Modules supported:
- date.js: date & time validation
- file.js: file mime, extension, size and dimension validation
- html5.js: make this plugin serve as an html5 fallback
- jsconf.js: configure form validation using javascript
- location.js: Country, US state, longitude and latitude validation
- logic.js: depends-on and if-answered validation
- sanitize.js: add sanitation functions to inputs (uppercase, lowercase, capitalize, trim, trimLeft, trimRight, numberFormat, insertLeft, insertRight, strip, escape (replace <, >, &, ' and " with HTML entities))
- security.js: Great for registration forms (spamcheck, confirmation, strength, backend, credit card, cvv).
- toggleDisabled.j: takes care of disabling/enabling submit buttons in forms, depending on if the inputs of the form is valid or not.
- uk.js: adds validators typically used on websites in the UK (ukvatnumber, ukutr, uknin)
- brazil.js: adds validators typically used on websites in Brazil (cpf, cep, brphone)
- poland.js: adds validators typically used on websites in Poland (plpesel)
- poland.js: adds validators typically used on websites in Sweden (validate_swesec (Social security number), validate_swemobile, validate_validate_municipality, validate_county, validate_swephone)
Install the Form Validator:
# NPM npm install jquery-form-validator # Bower bower install jquery-form-validator
Basic usage:
1. Include the main JavaScript file and modular files of your choice after JQuery library as this:
<script src="jquery.min.js"></script> <script src="jquery.form-validator.min.js"></script> <script src="module-name.min.js"></script>
2. Add validation rules to your form fields using HTML5 data
attributes:
<form action="#" method="POST"> <label> Username: <input data-validation="length alphanumeric" data-validation-length="min4"> </label> <label> Year (yyyy-mm-dd): <input data-validation="date" data-validation-format="yyyy-mm-dd"> </label> <label> Website: <input data-validation="url"> </label> <input type="submit"> </form>
3. Initialize the form validator:
$.validate();
4. Default plugin customization options.
$.validate({ // Names of inputs not to be validated ignore: [], // Class that will be put on elements which value is invalid errorElementClass: 'error', // Class that will be put on elements that has been validated with success successElementClass: 'valid', // Border color of elements which value is invalid // empty string to not change border color borderColorOnError: '#b94a48', // class name of div containing error messages when validation fails errorMessageClass: 'form-error', // name of the attribute holding the validation rules validationRuleAttribute: 'data-validation', // define custom err msg inline with element validationErrorMsgAttribute: 'data-validation-error-msg', // Can be either "top" or "inline" errorMessagePosition: 'inline', // template errorMessageTemplate: { container: '<div class="{errorMessageClass} alert alert-danger">{messages}</div>', messages: '<strong>{errorTitle}</strong><ul>{fields}</ul>', field: '<li>{msg}</li>' }, // scroll to top if the form wasn't validated scrollToTopOnError: true, // date format dateFormat: 'yyyy-mm-dd', // apply class="valid" even if the input wasn't validated addValidClassOnAll: false, // custom decimal separator decimalSeparator: '.', // twitter-bootstrap default class name inputParentClassOnError: 'has-error', // twitter-bootstrap default class name inputParentClassOnSuccess: 'has-success', // whether or not hidden inputs should be validated validateHiddenInputs: false, // callback functions inlineErrorMessageCallback: false, submitErrorMessageCallback: false });
Changelog:
2017-08-27
- v2.3.79
2017-08-10
- v2.3.76
2017-07-20
- Add Arabic language
2017-07-15
- Async validators should be applied to original validator object added when calling .addAsyncValidator
2017-07-07
- make it possible to inline language files
2017-07-05
- v2.3.72
2017-07-04
- Support Turkish Language
2017-05-11
- Added support for age-range in birthday validator
2017-05-10
- v2.3.62
2017-05-04
- v2.3.61
2017-04-08
- [fix] use successElementClass instead of valid class
2017-03-17
- various fixes
2017-02-25
- Add better green check mark
This awesome jQuery plugin is developed by victorjonsson. For more Advanced Usages, please check the demo page or visit the official website.