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.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | jquery.validate.js | jquery.validate.min.js | coc.forms.js | coc.forms.min.js
Functional grouping: Forms
Demo
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.