Form validation

Overview

Project lead: Paul Jackson (@pjackson28)

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.

See jQuery Validation Plugin - Documentation for more details.

Examples

• English examples
• French 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

• formvalid.js
• _formvalid.scss
• validate.js
• validateAdditional.js

Related Pages

• Date picker (input type='date' polyfill, calendar interface)
• CSS Grid System

References

• jQuery Validation