Form validation

Purpose

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

The Merge Server-Client errors functionality allows the merging of server error from an application with client errors .

Use when

Web forms

Working example

English:

French:

Evaluation and report

Accessibility pre-assessment #1
- English report
- French report

How to implement

Add class="wb-frmvld" to a div element surrounding the form element

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
	...
	</form>

Optional: Wrap each form field name with .... This specifies the prefix to use for the error message summary.
```
<label for="fname1">
	First Name (required)
</label>
```

Add required="required" to each mandatory form field

<input id="fname1" name="fname1" type="text" autocomplete="given-name" required="required" />

Optional:
- To make a standalone checkbox field's label look consistent with text field labels (i.e. bolded), add the checkbox checkbox-standalone classes to the checkbox and place it in a <div class="form-group"> element.
- For input fields, add one of these options for specialized validation, or else you can use a custom pattern validation only if your pattern is very specific and is not part of the options for specialized validation.
- For ASP validators add the following attributes to enable the Merge Server-Client errors functionality:
 Display="Dynamic" EnableClientScript="false" CssClass="label label-danger wb-server-error"

Configuration options

Option	Description	How to configure	Values
`hdLvl`	Heading level for error summary.	Add `"hdLvl": "headingLevel"` to the `data-wb-frmvld` attribute or `window[ "wb-frmvld" ]` where `headingLevel` is the heading level. Use the following JavaScript code instead to configure all instances of the plugin: `window[ "wb-frmvld" ] = {"hdLvl": "headingLevel"};`.	`h2` (default): Heading level 2 `h3`: Heading level 3 `h4`: Heading level 4 `h5`: Heading level 5 `h6`: Heading level 6
`ignore`	Selector identifying the fields to ignore.	Add `"ignore": "selector"` to the `data-wb-frmvld` attribute or `window[ "wb-frmvld" ]` where `selector` is a valid jQuery selector. Use the following JavaScript code instead to configure all instances of the plugin: `window[ "wb-frmvld" ] = {"ignore": ".ignore"};`.	`:hidden` (default): All hidden fields `.ignore`: All fields with the `ignore` class Empty string ("") None of the fields

Specialized validation

Add specialized validation to an input field by applying the following options.

Option	Validation type
`data-rule-alphanumeric="true"`	Alphanumeric
`data-rule-cifES="true"`	CIF code (Spain)
`data-rule-creditcard="true"`	Credit card number
`type="date"`	Date
`type="date" data-rule-dateISO="true"`	Date (ISO)
`type="date" data-rule-dateITA="true"`	Date (Italy)
`type="number"`	Digits only
`type="email"`	Email
`data-rule-equalTo="#x"`	Equal to field with id = "x"
`data-rule-lettersonly="true"`	Letters only
`data-rule-letterswithbasicpunc="true"`	Letters and basic punctuation only (allowed punctuation: [.])
`data-rule-maxlength="x"`	Maximum length of x
`max="x"`	Maximum number x
`data-rule-maxWords="x"`	Maximum of x words
`data-rule-minlength="x"`	Minimum length of x
`data-rule-strippedminlength="x"`	Minimum length of x (when HTML tags are removed)
`min="x"`	Minimum number x
`data-rule-minWords="x"`	Minimum of x words
`data-rule-nieES="true"`	NIE code (Spain)
`data-rule-nifES="true"`	NIF code (Spain)
`data-rule-nowhitespace="true"`	No white space
`data-rule-postalCodeCA="true"`	Postal code (Canada)
`data-rule-rangelength="[x,y]"`	Range (number)
`data-rule-rangelength="[x,y]"`	Range length x to y
`data-rule-rangeWords="[x,y]"`	Range of x to y words
`type="tel" data-rule-phoneUK="true"`	Telephone number (UK)
`type="tel" data-rule-mobileUK="true"`	Mobile number (UK)
`type="tel" data-rule-phoneUS="true"`	Telephone number (US)
`type="time"`	Time
`type="url"`	URL (IPv4)
`type="url" data-rule-ipv6="true"`	URL (IPv6)
`type="text" data-rule-url2="true"`	URL (TLD optional)
`data-rule-vinUS="true"`	Vehice Identification Number (VIN, US)
`data-rule-require_from_group='[1,".group"]'`	Validates the minimum number of fields within an group (each input requires the validation rule). The minium and group is defined by the options passed (number being the minium and a common class for each input).

See jQuery Validation Plugin - Documentation for more details.

Custom pattern validation

Use the pattern attribute jointly with the data-msg attribute in order to achieve a custom pattern validation with a custom error message.

pattern: Defines a pattern that the value of an input has to respect in order to be valid.
data-msg: Overwrites the default generic message that comes with the use of the pattern attribute by the one given through this attribute.

See WHATWG HTML Living Standards for more details about the pattern attribute.

Prevent screen readers from announcing "required" twice

Consider adding an aria-hidden="true" attribute to  (i.e. ) in required field labels. Hardcoding it will prevent screen readers from announcing "required" twice in the noscript and basic HTML versions of the page. The form validation plugin automatically adds the attribute to the JavaScript version. Don't use the attribute in required <legend> elements.

Merge Server-Client errors functionality

If you want to concatenate the server errors with the client errors, add the following attributes to each ASP validator:

Display="Dynamic" EnableClientScript="false" CssClass="label label-danger wb-server-error"

Asp Validator examples:

<asp:CustomValidator ID="TypeOfPrestationCv" ErrorMessage = "Your server error message" ControlToValidate="TypeOfPrestation" OnServerValidate="TypeOfPrestationCvServer"
Display="Dynamic" EnableClientScript="false" Cssclass="label label-danger wb-server-error" runat="server"></asp:CustomValidator>

<asp:RequiredFieldValidator ID="TypeOfPrestationRfv" ErrorMessage = "Your server error message" ControlToValidate="TypeOfPrestation"
Display="Dynamic" EnableClientScript="false" CssClass="label label-danger wb-server-error" runat="server"></asp:RequiredFieldValidator>

ASP.Net Web Form Demo1 - Source Code on GitHub

Events

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

Event Trigger What it does

wb-init.wb-frmvld Triggered manually (e.g., $( ".wb-frmvld" ).trigger( "wb-init.wb-frmvld" );). Used to manually initialize the form validation. Note: The Form validation plugin will be initialized automatically unless the form elements are added after the page has already loaded.

Event	Trigger	What it does
`wb-init.wb-frmvld`	Triggered manually (e.g., `$( ".wb-frmvld" ).trigger( "wb-init.wb-frmvld" );`).	Used to manually initialize the form validation. Note: The Form validation plugin will be initialized automatically unless the form elements are added after the page has already loaded.
`wb-ready.wb-frmvld` (v4.0.5+)	Triggered automatically after form validation initializes.	Used to identify the element where form validation has initialized (target of the event) `$( document ).on( "wb-ready.wb-frmvld", ".wb-frmvld", function( event ) { });` `$( ".wb-frmvld" ).on( "wb-ready.wb-frmvld", function( event ) { });`
`wb-ready.wb` (v4.0.5+)	Triggered automatically when WET has finished loading and executing.	Used to identify when all WET plugins and polyfills have finished loading and executing. `$( document ).on( "wb-ready.wb", function( event ) { });`

wb-ready.wb-frmvld (v4.0.5+)

Triggered automatically after form validation initializes.

Used to identify the element where form validation has initialized (target of the event)

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

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

wb-ready.wb (v4.0.5+)

Triggered automatically when WET has finished loading and executing.

Used to identify when all WET plugins and polyfills have finished loading and executing.

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

Date modified:: 2022-04-13

Language selection

Search and menus

Search