Form validation

Purpose

Provides generic validation and error message handling for Web forms.

Examples using regular or specialized validation

Examples using required fields without asterisks

Required fields can be alternatively styled without asterisks by adding the required-no-asterisk class to one of their parent elements (such as <div class="wb-frmvld"> or <form>).

Whether or not asterisks are used, it is recommended that they be implemented consistently within the same form. Please don't mix and match different asterisk styles within the same form.

Example using custom pattern validation

If the pattern attribute is used alongside the data-rule attribute, the pattern validation will prevail; meaning that in the end you only get the generic validation error message that comes from the use of pattern. It is strongly recommended to use the data-msg attribute to customize the error message displayed by the pattern validation when the field is in error state.

Various examples of stacked and horizontal forms

Edge test cases

The following examples are only for testing purposes of some edge case configurations to ensure the plugin continues to work as expected.

<div> between the form and the form validation plugin

When there is a wrapper <div> on the <form> element between the form and the validation plugin.

<div class="wb-frmvld">	<div id="app-root">	<form action="#" method="get" id="edge-test-1">	...	</form>	</div> </div>