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(
  ...
)

formslider.plugins.load({
  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.#{currentRole}", currentSlide)
@trigger("validation.invalid.#{currentRole}", currentSlide)
$(window).trigger('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:

input.without-spinner
  -moz-appearance: textfield

input.without-spinner::-webkit-outer-spin-button,
input.without-spinner::-webkit-inner-spin-button
  -webkit-appearance: none
  margin: 0

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

Authors

Tom Hanoldt