Form validation - nschonni/wet-boew GitHub Wiki
This component provides generic validation and error message handling for Web forms.
Project lead: Paul Jackson (@pjackson28)
- Multiple validation methods
- Customized error messages
- Conforms to WCAG 2.0 AA
- Uses WAI-ARIA to enhance accessibility
- Progressive enhancement approach
- Web forms
- Add class="wet-boew-formvalid" to a div element surrounding the *form* element
<div class="wet-boew-formvalid"><form action="#" method="post">...</form></div>
-
Optional: Wrap each form field name with *...*. 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:
| Validation type | Syntax |
|---|---|
| Alphanumeric | class="{validate:{alphanumeric:true}}" |
| Date | type="date" |
| Date (ISO) | type="date" class="{validate:{dateISO:true}}" |
| Digits only | type="number" |
| Letters only | class="{validate:{lettersonly:true}}" |
| Letters and basic punctuation only (allowed punctuation: [.]) | class="{validate:{letterswithbasicpunc:true}}" |
| Maximum length of x | class="{validate:{maxlength:x}}" |
| Maximum number x | max="x" |
| Minimum length of x | class="{validate:{minlength:x}}" |
| Minimum number x | min="x" |
| type="email" | |
| Range length x to y | class="{validate:{rangelength:[x,y]}}" |
| Telephone number (US) | type="tel" class="{validate:{phoneUS:true}}" |
| Time | type="time" |
| URL (IPv4) | type="url" |
| URL (IPv6) | type="url" class="{validate:{ipv6:true}}" |
See jQuery Validation Plugin - Documentation for more details.
Form validation is dependent on jQuery Validation (GPL 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]]
- Enabling only the client-side form field validation can open the door for malicious attacks on the server
- Adding examples for radio buttons and checkboxes
- Using data-* instead of class to pass complex parameters to the component