Form validation

Questions or comments?

Purpose

This component provides generic validation and error message handling for Web forms.

Use when

Working example

How to implement

  1. Add class="wb-frmvld" to a div element surrounding the form element
    <div class="wb-frmvld">
    	<form action="#" method="get" id="validation-example">
    	...
    	</form>
  2. Optional: Wrap each form field name with <span class="field-name">...</span>. This specifies the prefix to use for the error message summary.
    <label for="fname1">
    	<span class="field-name">First Name</span> <strong class="required">(required)</strong>
    </label>
  3. Add required="required" to each mandatory form field
    <input id="fname1" name="fname1" type="text" required="required" />
  4. Optional: For input fields, add one of the configuration options for specialized validation.

Configuration options

Option Description How to configure Values
hdLvl Heading level for error summary. Add "hdLvl": "headingLevel" to the data-wb-frmvld attribute or window[ "wb-frmvld" ] where headingLevel is the heading level. Use the following JavaScript code instead to configure all instances of the plugin: window[ "wb-frmvld" ] = {"hdLvl": "headingLevel"};.
h2 (default):
Heading level 2
h3:
Heading level 3
h4:
Heading level 4
h5:
Heading level 5
h6:
Heading level 6
ignore Selector identifying the fields to ignore. Add "ignore": "selector" to the data-wb-frmvld attribute or window[ "wb-frmvld" ] where selector is a valid jQuery selector. Use the following JavaScript code instead to configure all instances of the plugin: window[ "wb-frmvld" ] = {"ignore": ".ignore"};.
:hidden (default):
All hidden fields
.ignore:
All fields with the ignore class
Empty string ("")
None of the fields

Specialized validation

Add specialized validation to an input field by applying the following options.

Option Validation type
data-rule-alphanumeric="true" Alphanumeric
data-rule-cifES="true" CIF code (Spain)
data-rule-creditcard="true" Credit card number
type="date" Date
type="date" data-rule-dateISO="true" Date (ISO)
type="date" data-rule-dateITA="true" Date (Italy)
type="number" Digits only
type="email" Email
data-rule-equalTo="#x" Equal to field with id = "x"
data-rule-lettersonly="true" Letters only
data-rule-letterswithbasicpunc="true" Letters and basic punctuation only (allowed punctuation: [.])
data-rule-maxlength="x" Maximum length of x
max="x" Maximum number x
data-rule-maxWords="x" Maximum of x words
data-rule-minlength="x" Minimum length of x
data-rule-strippedminlength="x" Minimum length of x (when HTML tags are removed)
min="x" Minimum number x
data-rule-minWords="x" Minimum of x words
data-rule-nieES="true" NIE code (Spain)
data-rule-nifES="true" NIF code (Spain)
data-rule-nowhitespace="true" No white space
data-rule-postalCodeCA="true" Postal code (Canada)
data-rule-rangelength="[x,y]" Range (number)
data-rule-rangelength="[x,y]" Range length x to y
data-rule-rangeWords="[x,y]" Range of x to y words
type="tel" data-rule-phoneUK="true" Telephone number (UK)
type="tel" data-rule-mobileUK="true" Mobile number (UK)
type="tel" data-rule-phoneUS="true" Telephone number (US)
type="time" Time
type="url" URL (IPv4)
type="url" data-rule-ipv6="true" URL (IPv6)
type="url" data-rule-url2="true" URL (TLD optional)
data-rule-vinUS="true" Vehice Identification Number (VIN, US)

See jQuery Validation Plugin - Documentation for more details.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb-frmvld Triggered manually (e.g., $( ".wb-frmvld" ).trigger( "wb-init.wb-frmvld" );). Used to manually initialize the form validation. Note: The Form validation plugin will be initialized automatically unless the form elements are added after the page has already loaded.
wb-ready.wb-frmvld (v4.0.5+) Triggered automatically after form validation initializes. Used to identify the element where form validation has initialized (target of the event)
$( document ).on( "wb-ready.wb-frmvld", ".wb-frmvld", function( event ) {
});
$( ".wb-frmvld" ).on( "wb-ready.wb-frmvld", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing.
$( document ).on( "wb-ready.wb", function( event ) {
});

See jQuery Validation Plugin - Documentation for details about events specific to jQuery Validation.

Source code

Form validation source code on GitHub

Date modified: