formslider.jquery-validation
This plugin uses history.js for history manipulating and supports also older browsers and html4.
Installation
bower install formslider.jquery-validation # or npm install formslider.jquery-validation
Include js dependencies
Load the following dependencies:
[path_to_you_bower_components]/jquery-validation/dist/jquery.validate.min.js
[path_to_you_bower_components]/formslider.jquery-validation/dist/formslider.jquery-validation.js
Load the plugin
See formslider for more infos.
formslider = $'.formslider-wrapper'formslider ... formsliderpluginsload class: 'JqueryValidate' config: ...
JqueryValidate
Validates inputs on current slide before leaving this slide. Will stop leaving when not all inputs are valid. Uses jquery-validation.
Default configuration:
config: selector: 'input:visible:not([readonly])' validateOnEvents: 'leaving.next' forceMaxLengthJs: "javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" pattern: numeric: '\\d*' tel: '^[0-9/\\-\\+\\s\\(\\)]*$' messages: required: 'Required' maxlength: 'To long' minlength: 'To short' tel: 'Enter valid phone number' email: 'Enter valid email' number: 'Enter valid number' pattern: 'Invalid input'
The plugin automatically detects the following attributes:
* required # also add aria-required="true" * minlength * maxlength * type="email" * type="number" * type="tel" * pattern="..." * data-force-max-length="1" # will truncate input if longer * data-without-spinner"1" # will prevent spinner input on number types
The Plugin triggers the following events:
@trigger"validation.valid."currentSlide@trigger"validation.invalid."currentSlide$windowtrigger'resize' # if one ore more inputs are invalid -> height could be adjusted
Note: This plugin will throw an error if no surrounding form tag is present.
Note: data-without-spinner"1"
needs some additional styling:
- -
Changelog
1.0.0
- initial
Resources
- https://github.com/formslider/jquery.formslider
- https://github.com/formslider/formslider.jquery-validation
- http://bower.io/search/?q=formslider.jquery-validation