Setup
Include the JS script from the dist folder.
<script src="dist/js/formvalidate.min.js"></script>Add js_form_validate class to forms that you want to validate.
Now you will need to setup the inputs for validation. Set the data-validate attribute to a validation type. If the input should contain some value(i.e. is required), set the data-required on that input as well.
Also set up the submit trigger by adding the js_form_validate_submit class to the submit button or any other element that is a child of the form.
Submit
Lastly, initiate FormValidate like so:
<script>
new FormValidate();
</script>You should now have some validation!
Validation Types
These are the available validation types:
// Alhpabet letters only, no spaces or anything else
// abCDefG
"alpha"
// Alhpabet and Digits only, no spaces or anything else
// abcXYZ123
"alpha_num"
// Similar to integer but allows single period
// 98.3858
"decimal"
// Filters out most special characters
// very+simple-mail_filter@staying.easy.com
"email"
// Just digits, no spaces or anything else
// 982398298
"integer"
// Same as alpha but allows space, period, dash
// Billy-Joe Smith Jr.
"name"
// Same as integer but applies US phone format
// 0123456789 -> 012-345-6789
"phone"
// Alphanum with punctuation
"plain_text"Options
You can change the trigger/style classes that FormValidate will look for and set. Here are the options and the defaults:
// Set this to false if you dont want input filtering on
activeInputFiltering: true,
// This value will be prepended with "data-" to create the data
// validate attribute that FormValidate will use from the inputs
// it finds. By default it looks for data-validate
dataTag: 'validate',
// This value will be prepended with "data-" to create the data
// active validation attribute that FormValidate will use from the
// inputs it finds. By default it looks for data-active-validation
dataActiveValidation: 'active-validation',
// This is used to find forms to validate
formClass: 'js_form_validate',
// Class added to forms that validate successfully
formSuccessClass: 'validate-success',
// Class added to targets that fail validation
errorClass: 'validate-error',
// Sets target to apply the error class on failed validation.
// Setting a class (i.e. input-wrapper) of a parent element will
// instruct FormValidate to apply the error class to element instead.
errorTarget: 'self',
// Class added to form when form is being processed
processingClass: 'processing',
// This value will be prepended with "data-" to create the
// data required attribute that FormValidate will use to determine
// if an input is required. By default it looks for data-required
requiredTag: 'required',
// This is used to find the submit button that will trigger
// it's parent form
submitClass: 'js_form_validate_submit'Support or Contact
If you want to see how programattically validate forms or specific inputs, check out the repo here: formvalidate.js. If you see a bug or have an issue, please open up a ticket. Thanks!