TMI jQuery Validation
Powered by jquery.inputmask, Parsley.js and jQuery.
Installation/Quick Start
$ npm i -S tmi-jquery-validation
; ;
Overview
You can validate forms on the site by adding some data-
attributes to various form fields.
Example form code without validation
Take the following form code as an example.
First Name: * Last Name: * Email: * Favorite color: * Select a color Blue Green Red Yellow Favorite pizza topping: * Sausage Pepperoni Cheese Please write an explanation for your answers:
How to enable form validation
The custom form validation we use on the site will begin working on this form after doing the following:
- Adding
data-validate
to the<form>
tag. - Adding either HTML5/ParsleyJS validation rules to each input or using a valid selector
Custom validation rules
Type | Data Attribute | Error Message | Requirements |
---|---|---|---|
First Name | data-validate-first-name |
"Please enter your first name" | Required, must be 2 characters minimum |
Last Name | data-validate-last-name |
"Please enter your last name" | Required, must be 2 characters minimum |
data-validate-email |
"Please enter a valid email" | Required, must be a valid email address | |
Zip Code | data-validate-zip-code |
"Please enter a zip code" | Required, must be 5 characters, must be digits |
Phone | data-validate-phone |
"Please enter a valid phone number" | Required, must be in a (XXX) XXX-XXXX format |
Birthdate | data-validate-birthdate |
"Please enter a valid date of birth" | Required, must be in a XX/XX/XXXX format |
Birthdate (with hyphens) | data-validate-birthdate-hyphen |
"Please enter a valid date of birth" | Required, must be in a XX-XX-XXXX format |
Date | data-validate-date |
"Please enter a valid date" | Required, must be in a XX-XX-XXXX format |
Date (Optional) | data-validate-optional-date |
"Please enter a valid date" | Must be in a XX-XX-XXXX format |
Comment | data-validate-comment |
Standard "is required" message | Required, must be between 5-2500 characters |
Field Limit | data-parsley-field-limit="1000" |
"This field cannot be more than X characters long" | Required, cannot be more than 1000 characters |
Example form with validation applied
<!-- The form must have a data-validate data attribute to enable validation--> First Name: * Last Name: * Email: * Favorite color: * Select a color Blue Green Red Yellow Favorite pizza topping: * <!-- To validate a field group you must wrap the group with a fieldset and then add the element below as the place where your error message will display. Note: Only one field is required to have the "required" attribute because they all share the same name. --> Sausage Pepperoni Cheese Please write an explanation for your answers: <!-- data-validate-field-limit will display the number of characters remaining for their response -->