Lightweight Form Validator For Bootstrap - jQuery validator.js
File Size: | 7.77 KB |
---|---|
Views Total: | 2170 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

validator.js is a small yet feature-rich jQuery form validation plugin for Bootstrap framework that currently comes with 6 validators: 'required', 'length', 'or', 'equals', 'callback' and custom REGEX patterns.
More features:
- Custom error messages.
- Allows to specify which form fields to be validated.
- Allows to validate form fields on submit or on blur.
How to use it:
1. Make sure you first have jQuery library and Bootstrap framework are loaded in your html page.
<link rel="stylesheet" href="bootstrap.min.css"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script>
2. Load the jQuery validator.js plugin's files in the page.
<link rel="stylesheet" href="validator.css"> <script src="validator.js"></script>
3. Initialize the validator.js plugin and you're ready to go.
$('form').validator();
4. Add the form validators to your form fields using data-VALIDATOR
attributes and define the error messages as these:
<input data-required="true" type="text" class="form-control"> <span class="help-block error--required"> Please fill out this field </span> <input data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" type="text" class="form-control"> <span class="help-block error--required"> Please enter a valid address </span> <input data-required="true" name="email" data-or="username" type="text" class="form-control"> <input data-required="true" name="username" data-or="email" type="text" class="form-control"> <span class="help-block error--or"> Fill out one of the two Fields </span> <input data-required="true" data-callback="customValidation" type="text" class="form-control"> <span class="help-block error--callback"> Your Input is for some Reason Invalid </span <script> window.customValidation = function( $input ){ var isValid = false; //Do some Voodoo to figure out if the input is Valid return isValid; } </script>
5. Default plugin option to customize the form validator.
$('form').validator({ elementsToValidate: [ "input", "select", "textarea" ], onlyValidateOnSubmit: false, errorClass: "has-error", formRowSelector: ".form-group", });
This awesome jQuery plugin is developed by MrMadClown. For more Advanced Usages, please check the demo page or visit the official website.