Form validation


Purpose

Provides generic validation and error message handling for Web forms.

Examples using regular or specialized validation

Contact information
View code

Consider adding an aria-hidden="true" attribute to <strong class="required"> (i.e. <strong class="required" aria-hidden="true">) 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.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="title1" class="required"><span class="field-name">Title</span> <strong class="required">(required)</strong></label>
			<select class="form-control" id="title1" name="title1" autocomplete="honorific-prefix" required="required">
				<option label="Select a title"></option>
				<option value="dr">Dr.</option>
				<option value="esq">Esq.</option>
				<option value="mr">Mr.</option>
				<option value="ms">Ms.</option>
			</select>
		</div>
View code

Consider adding an aria-hidden="true" attribute to <strong class="required"> (i.e. <strong class="required" aria-hidden="true">) 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.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="fname1" class="required"><span class="field-name">First name</span> <strong class="required">(required)</strong></label>
			<input class="form-control" id="fname1" name="fname1" type="text" autocomplete="given-name" required="required" data-rule-minlength="2" />
		</div>
View code

Consider adding an aria-hidden="true" attribute to <strong class="required"> (i.e. <strong class="required" aria-hidden="true">) 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.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="lname1" class="required"><span class="field-name">Last name</span> <strong class="required">(required)</strong></label>
			<input class="form-control" id="lname1" name="lname1" type="text" autocomplete="family-name" required="required" data-rule-minlength="2" />
		</div>
View code

Consider adding an aria-hidden="true" attribute to <strong class="required"> (i.e. <strong class="required" aria-hidden="true">) 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.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="tel1" class="required"><span class="field-name">Telephone number (including area code)</span> <strong class="required">(required)</strong></label>
			<input class="form-control" id="tel1" name="tel1" type="tel" autocomplete="tel" required="required" data-rule-phoneUS="true" />
		</div>
View code

Consider adding an aria-hidden="true" attribute to <strong class="required"> (i.e. <strong class="required" aria-hidden="true">) 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.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="pcodeca1" class="required"><span class="field-name">Postal code</span> <strong class="required">(required)</strong></label>
			<input class="form-control" id="pcodeca1" name="pcodeca1" type="text" autocomplete="postal-code" size="7" maxlength="7" required="required" data-rule-postalCodeCA="true" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="email1"><span class="field-name">Email address</span> (yourname@domain.com)</label>
			<input class="form-control" id="email1" name="email1" type="email" autocomplete="email" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="url1"><span class="field-name">Website URL (https://www.url.com)</span></label>
			<input class="form-control" id="url1" name="url1" type="url" autocomplete="url" />
		</div>
View code

Consider adding an aria-hidden="true" attribute to <strong class="required"> (i.e. <strong class="required" aria-hidden="true">) 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.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="file1" class="required"><span class="field-name">File</span> <strong class="required">(required)</strong></label>
			<input id="file1" name="file1" type="file" required="required" />
		</div>
Other examples
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="date1"><span class="field-name">Date</span><span class="datepicker-format"> (<abbr title="Four digits year, dash, two digits month, dash, two digits day">YYYY-MM-DD</abbr>)</span></label>
			<input class="form-control" id="date1" name="date1" type="date" data-rule-dateISO="true" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="time1"><span class="field-name">Time</span> (hh:mm)</label>
			<input class="form-control" id="time1" name="time1" type="time" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
	...
	<div class="form-group">
		<label for="number1"><span class="field-name">Number</span> (between -a and 1 by step 0.1)</label>
		<input class="form-control" id="number1" name="number1" type="number" min="-1" max="1" step="0.1" />
	</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="an1"><span class="field-name">Alphanumeric</span> (at least 4 characters)</label>
			<input class="form-control" id="an1" name="an1" type="text" data-rule-alphanumeric="true" data-rule-minlength="4" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="numeric1"><span class="field-name">Numeric</span> (digits only)</label>
			<input class="form-control" id="numeric1" name="numeric1" type="number" data-rule-digits="true" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="letters1"><span class="field-name">Letters only</span> (maximum of 5 characters)</label>
			<input class="form-control" id="letters1" name="letters1" type="text" size="5" maxlength="5" data-rule-lettersonly="true" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="text1"><span class="field-name">Letters and punctuation only</span> (allowed punctuation: [. , ( ) "])</label>
			<input class="form-control" id="text1" name="text1" type="text" data-rule-letterswithbasicpunc="true" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="word1"><span class="field-name">Maximum of 10 words</span></label>
			<input class="form-control" id="word1" name="word1" type="text" data-rule-maxWords="10" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="word2"><span class="field-name">Minimum of 2 words</span></label>
			<input class="form-control" id="word2" name="word2" type="text" data-rule-minWords="2" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="word3"><span class="field-name">Between 2 and 10 words</span></label>
			<input class="form-control" id="word3" name="word3" type="text" data-rule-rangeWords="[2,10]" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="nowhitespace1"><span class="field-name">No white space</span></label>
			<input class="form-control" id="nowhitespace1" name="nowhitespace1" type="text" data-rule-nowhitespace="true" />
		</div>
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="password1"><span class="field-name">Password</span> (between 5 and 10 characters)</label>
			<input class="form-control" id="password1" name="password1" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-rangelength="[5,10]" />
			<label for="passwordconfirm"><span class="field-name">Confirm your password</span></label>
			<input class="form-control" id="passwordconfirm" name="passwordconfirm" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-equalTo="#password1" />
		</div>
View code

Consider adding an aria-hidden="true" attribute to <strong class="required"> (i.e. <strong class="required" aria-hidden="true">) 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.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
			<div class="form-group">
				<div class="checkbox checkbox-standalone required">
					<label for="agree1"><input id="agree1" name="agree1" type="checkbox" required> <span class="field-name">I agree</span> <strong class="required">(required)</strong></label>
				</div>
			</div>
Favourite pets (required)
View code

It is recommended to use data-rule-required="true" vs required="required" as this avoids screen readers indicating that the first option is required.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Favourite pets</span> <strong class="required">(required)</strong></legend>
			<div class="checkbox">
				<label for="animal1"><input type="checkbox" name="animal" value="1" id="animal1" data-rule-required="true" /> Dog</label>
			</div>
			<div class="checkbox">
				<label for="animal2"><input type="checkbox" name="animal" value="2" id="animal2" /> Cat</label>
			</div>
			<div class="checkbox">
				<label for="animal3"><input type="checkbox" name="animal" value="3" id="animal3" /> Fish</label>
			</div>
			<div class="checkbox">
				<label for="animal4"><input type="checkbox" name="animal" value="4" id="animal4" /> Other</label>
			</div>
		</fieldset>
Citizenship status (required)
View code

It is recommended to use data-rule-required="true" vs required="required" as this avoids screen readers indicating that the first option is required.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Citizenship status</span> <strong class="required">(required)</strong></legend>
			<div class="radio">
				<label for="status1"><input type="radio" name="status" value="1" id="status1" data-rule-required="true" /> Canadian citizen</label>
			</div>
			<div class="radio">
				<label for="status2"><input type="radio" name="status" value="2" id="status2" /> Permanent resident</label>
			</div>
			<div class="radio">
				<label for="status3"><input type="radio" name="status" value="3" id="status3" /> Work permit</label>
			</div>
			<div class="radio">
				<label for="status4"><input type="radio" name="status" value="4" id="status4" /> Other</label>
			</div>
		</fieldset>

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.

View code

Consider adding an aria-hidden="true" attribute to <strong class="required"> (i.e. <strong class="required" aria-hidden="true">) 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.

<div class="wb-frmvld">
				<form action="#" method="get" id="validation-example">
					...
					<div class="form-group">
						<label for="custom1" class="required"><span class="field-name">Application number (one letter followed by six digits)</span> <strong class="required">(required)</strong></label>
						<input class="form-control" id="custom1" name="custom1" type="text" pattern="[A-Za-z][0-9]{6}" required="required" />
					</div>

Examples of stacked and horizontal forms using list items as container

Stacked checkboxes in a <li> pattern with implicit labels (required)
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Stacked checkboxes in a <code>&lt;li&gt;</code> pattern with implicit labels</span> <strong class="required">(required)</strong></legend>
			<ul class="form-group list-unstyled">
				<li class="checkbox">
					<label for="fruits1a"><input type="checkbox" name="example1" value="1" id="fruits1a" required="required" />Apple</label>
				</li>
				<li class="checkbox">
					<label for="fruits2a"><input type="checkbox" name="example1" value="2" id="fruits2a" />Orange</label>
				</li>
				<li class="checkbox">
					<label for="fruits3a"><input type="checkbox" name="example1" value="3" id="fruits3a" />Kiwi</label>
				</li>
				<li class="checkbox">
					<label for="fruits4a"><input type="checkbox" name="example1" value="4" id="fruits4a" />Other</label>
				</li>
			</ul>
		</fieldset>
Note: The for attribute in the labels is optional for this pattern
Stacked radio buttons in a <li> pattern with implicit labels (required)
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Stacked radio buttons in a <code>&lt;li&gt;</code> pattern with implicit labels</span> <strong class="required">(required)</strong></legend>
			<ul class="form-group list-unstyled">
				<li class="radio">
					<label for="fruits1b"><input type="radio" name="example2" value="1" id="fruits1b" required="required" />Apple</label>
				</li>
				<li class="radio">
					<label for="fruits2b"><input type="radio" name="example2" value="2" id="fruits2b" />Orange</label>
				</li>
				<li class="radio">
					<label for="fruits3b"><input type="radio" name="example2" value="3" id="fruits3b" />Kiwi</label>
				</li>
				<li class="radio">
					<label for="fruits4b"><input type="radio" name="example2" value="4" id="fruits4b" />Other</label>
				</li>
			</ul>
		</fieldset>
Note: The for attribute in the labels is optional for this pattern
Stacked checkboxes in a <div> pattern with implicit labels (required)
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Stacked checkboxes in a <code>&lt;div&gt;</code> pattern with implicit labels</span> <strong class="required">(required)</strong></legend>
			<div class="checkbox">
				<label for="fruits1c"><input type="checkbox" name="example3" value="1" id="fruits1c" required="required" />Apple</label>
			</div>
			<div class="checkbox">
				<label for="fruits2c"><input type="checkbox" name="example3" value="2" id="fruits2c" />Orange</label>
			</div>
			<div class="checkbox">
				<label for="fruits3c"><input type="checkbox" name="example3" value="3" id="fruits3c" />Kiwi</label>
			</div>
			<div class="checkbox">
				<label for="fruits4c"><input type="checkbox" name="example3" value="4" id="fruits4c" />Other</label>
			</div>
		</fieldset>
Note: The for attribute in the labels is optional for this pattern
Horizontal checkboxes in a <li> pattern with explicit labels (required)
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Horizontal checkboxes in a <code>&lt;li&gt;</code> pattern with explicit labels</span> <strong class="required">(required)</strong></legend>
			<ul class="form-inline list-unstyled">
				<li class="label-inline">
					<input type="checkbox" name="example4" value="1" id="fruits5" required="required" />
					<label for="fruits5">Apple</label>
				</li>
				<li class="label-inline">
					<input type="checkbox" name="example4" value="2" id="fruits6" />
					<label for="fruits6">Orange</label>
				</li>
				<li class="label-inline">
					<input type="checkbox" name="example4" value="3" id="fruits7" />
					<label for="fruits7">Kiwi</label>
				</li>
				<li class="label-inline">
					<input type="checkbox" name="example4" value="4" id="fruits8" />
					<label for="fruits8">Other</label>
				</li>
			</ul>
		</fieldset>
Horizontal radio buttons in a <label> pattern with implicit labels (required)
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="form-inline chkbxrdio-grp">
			<legend class="required"><span class="field-name">Horizontal radio buttons in a <code>&lt;label></code> pattern with implicit labels</span> <strong class="required">(required)</strong></legend>
			<label for="tech1" class="radio-inline"><input type="radio" name="example5" value="1" id="tech1" required="required" />Smartphone</label>
			<label for="tech2" class="radio-inline"><input type="radio" name="example5" value="2" id="tech2" />Laptop</label>
			<label for="tech3" class="radio-inline"><input type="radio" name="example5" value="3" id="tech3" />Voice assistant</label>
			<label for="tech4" class="radio-inline"><input type="radio" name="example5" value="4" id="tech4" />Fusion reactor</label>
		</fieldset>
Horizontal checkboxes in a <div> pattern with explicit labels (required)
View code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="form-inline chkbxrdio-grp">
			<legend class="required"><span class="field-name">Horizontal checkboxes in a <code>&lt;div&gt;</code> pattern with explicit labels</span> <strong class="required">(required)</strong></legend>
			<div class="label-inline">
				<input type="checkbox" name="example6" value="1" id="tech5" required="required" />
				<label for="tech5">Smartphone</label>
			</div>
			<div class="label-inline">
				<input type="checkbox" name="example6" value="2" id="tech6" />
				<label for="tech6">Laptop</label>
			</div>
			<div class="label-inline">
				<input type="checkbox" name="example6" value="3" id="tech7" />
				<label for="tech7">Voice assistant</label>
			</div>
			<div class="label-inline">
				<input type="checkbox" name="example6" value="4" id="tech8" />
				<label for="tech8">Fusion reactor</label>
			</div>
		</fieldset>
Date modified: