Form validation

Purpose

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

Use when

• Web forms

Working example

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

Events

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

$( document ).on( "wb-ready.wb-frmvld", ".wb-frmvld", function( event ) {
});

$( ".wb-frmvld" ).on( "wb-ready.wb-frmvld", function( event ) {
});

$( 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