Include the JS script from the
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.
Lastly, initiate FormValidate like so:
<script> new FormValidate(); </script>
You should now have some validation!
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 // firstname.lastname@example.org "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"
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!