Validation de formulaires

Needs translation

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:

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" required="required" />

Optional: For input fields, add one of these options for specialized validation.
Optional: 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="url" 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.

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

Signaler un problème sur cette page

Date de modification :: 2018-07-04

Sélection de la langue

Recherche