Form validation

Overview

Project lead: Paul Jackson (@pjackson28)

Purpose

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

Benefits

  • Multiple validation methods
  • Customized error messages
  • Conforms to WCAG 2.0 AA
  • Uses WAI-ARIA to enhance accessibility
  • Progressive enhancement approach

Recommended usage

Web forms

Implementation

  1. Add class="wet-boew-formvalid" to a div element surrounding the *form* element
    <div class="wet-boew-formvalid"><form action="#" method="post">...</form></div>
  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="fname"><span class="field-name">First Name</span> <strong>(required)</strong></label>
  3. Add required="required" to each mandatory form field
    <input id="fname" name="fname" type="text" required="required" />
  4. Optional: For input fields, add one of the following syntax for specialized validation:

Note: The specialized validation syntax has changed in v3.0.6 and v3.1.0 from class="{validate:{rulename:value}}" to data-rule-rulename="value". This data syntax can also be used to add custom messages in the format data-msg-rulename="Your message".The old syntax is obsolete but will be supported for the time being to accommodate the transition to the new syntax.

Validation type Syntax (WET v3.0.6+ and v3.1.0+) Syntax (WET v3.0.0 to v3.0.5)
Alphanumeric data-rule-alphanumeric="true" class="{validate:{alphanumeric:true}}"
Date type="date" type="date"
Date (ISO) type="date" data-rule-dateISO="true" type="date" class="{validate:{dateISO:true}}"
Digits only type="number" type="number"
Letters only data-rule-lettersonly="true" class="{validate:{lettersonly:true}}"
Letters and basic punctuation only (allowed punctuation: [.]) data-rule-letterswithbasicpunc="true" class="{validate:{letterswithbasicpunc:true}}"
Maximum length of x data-rule-maxlength="x" class="{validate:{maxlength:x}}"
Maximum number x max="x" max="x"
Minimum length of x data-rule-minlength="x" class="{validate:{minlength:x}}"
Minimum number x min="x" min="x"
Email type="email" type="email"
Range length x to y data-rule-rangelength="[x,y]" class="{validate:{rangelength:[x,y]}}"
Telephone number (US) type="tel" data-rule-phoneUS="true" type="tel" class="{validate:{phoneUS:true}}"
Time type="time" type="time"
URL (IPv4) type="url" type="url"
URL (IPv6) type="url" data-rule-ipv6="true" type="url" class="{validate:{ipv6:true}}"

See jQuery Validation Plugin - Documentation for more details.

Examples

Development

Form validation is dependent on jQuery Validation (MIT license). It is also enhanced by the datepicker polyfill and the CSS Grid System.

The code for form validation is located in several places within the source folder of WET:

Known Issues

  • Enabling only the client-side form field validation can open the door for malicious attacks on the server

Version History

Related Pages

References