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
- Add
class="wet-boew-formvalid"to adivelement surrounding the *form* element<div class="wet-boew-formvalid"><form action="#" method="post">...</form></div> - 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> - Add
required="required"to each mandatory form field<input id="fname" name="fname" type="text" required="required" /> - 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" |
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:
- js/workers/formvalid.js - contains the JavaScript code for form validation
- js/sass/includes/_formvalid.scss - contains the CSS for form validation
- js/dependencies/validate.js - main jQuery Validation plugin script file
- js/dependencies/validateAdditional.js - additional validation methods for jQuery Validation
- js/i18n/formvalid/ - internationalization files for jQuery Validation
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
- Date modified: