Form validation

Uses the open source jQuery Validation Plugin for client-side form validation. Additional UX enhancements are included in coc.forms.js. These enhancements are based off the Web Experience Toolkit’s validation UX and include a summary alert banner and styled inline alerts.

Demo

Example optional helper text:
Your password contains at least 8 characters.

Error 3: This field is required

Code


				
			

Responsive preview

How to use

1. Load the 3 JavaScript files to your page and call one of the initialization lines:

<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/coc.forms.js"></script>
<script>
	$( document ).ready( function() {
		// Use the following line to initialize the validation AND to generate the enhanced form controls.
		COC.Form.init();

		// OR use the following line to initialize ONLY the validation.
		COC.Form.initValidation();
	});
</script>

2. Add this data attribute to any forms you wish to apply validation: data-pl-frm-vld="true".

<!-- Example form with the data-attributes to trigger the validation AND the enhanced form controls. -->
<form class="form-width-md" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
	...
</form>

<!-- Example form with the data-attribute to trigger the validation ONLY. -->
<form class="form-width-md" data-pl-frm-vld="true">
	...
</form>

Supported validation rules

Below are some of the supported validation rules that can be applied to an input field.

Attribute Code example Description
Attribute: required aria-required="true" Code example: <input type="text" class="form-control" required aria-required="true" ...> Description: A value for the input is required.
Attribute: type="email" Code example: <input type="email" class="form-control" ...> Description: The input must be a properly formatted email address.
Attribute: data-rule-equalTo="#x" Code example: <input id="password1" type="password" class="form-control" ...>
<input id="password2" type="password" class="form-control" data-rule-equalTo="#password1" ...>
Description: The input must be exactly equal to the value of the input whose id equals "x".
This attribute is particularly useful for confirming passwords upon an account creation.
Attribute: minlength="x" Code example: <input type="text" minlength="1" class="form-control" ...> Description: Minimum number of characters for the input
Attribute: maxlength="x" Code example: <input type="text" maxlength="255" class="form-control" ...> Description: Maximum number of characters for the input
Attribute: type="number" Code example: <input type="number" class="form-control" ...> Description: The input must be a number.
Attribute: type="number" min="x" Code example: <input type="number" min="0" class="form-control" ...> Description: Minimum numerical value for the input.
Attribute: type="number" max="x" Code example: <input type="number" max="999999" class="form-control" ...> Description: Maximum numerical value for the input.
Attribute: type="number" min="0" max="999999" Code example: <input type="number" min="0" max="999999" class="form-control" ...> Description: Minimum and maximum numerical value for the input.

Unable to use the validation plugin?

If your project will be using its own form validation plugins or custom scripts, keep the following validation functionality in mind:

  • Display an inline-alert below the input field if there is an error.
  • Generate an alert banner at the top of the form to list out and link to each form error.
  • For accessibility, if the user submits the form with errors, the alert banner should receive focus. This allows the user to see all of the form errors from a high-level.
  • Once an error has been fixed, remove the corresponding error messages.