Form Validator
jQuery plugin providing a flexible form validated function.
Example
Examples can be found here.
Features
- Flexible
- Deal with success or error msg
- Reusable
Get Started
HTML Form:
<!-- use bootstrap.css --> <form class="form"> <div class="form-group"> <label for="your-name">Name</label> <input type="text" name="name" class="form-control" id="your-name" placeholder="Enter your name"> </div> <div class="form-group"> <label for="email">Email address</label> <input type="text" name="email" class="form-control" id="email" placeholder="Enter email"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> Configure form validator:
var validator = new FormValidator('.form'); // form DOM element validator.config([ // name { selector: '[name="name"]', // jQuery selector inside the form name: 'Name', // give a name to this entity (whatever you want) match: new RegExp('[a-zA-Z]','g'), // the exgex it should match required: true, // whether it is a required field error: function() { // when invalid this.$element.closest('.form-group').addClass('has-error'); }, success: function() { // when valid this.$element.closest('.form-group').removeClass('has-error'); }, }, //email { selector: '[name="email"]', name: 'Email', required: true, match: new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$","g"), error: function() { this.$element.closest('.form-group').addClass('has-error'); }, success: function() { this.$element.closest('.form-group').removeClass('has-error'); }, } ]); Trigger Validator:
$('.register-form').submit(function(){ // the check whether all elements are valid if (validator.submit()) // return boolean, valid element trigger success function, otherwise, error function return true; return false; })Usage
Init Validator
Constructor accepts one parameter which is CSS selector of form element
var validator = new FormValidator('.form')Configure Validator
config method accepts an array as parameter which is the element entity or input need to validate
validator.config([ //... ])Entity Attribute
selector (required)
The selector of input element in the form, so if your form selector is .form, and your selector attribute equals .input, the final selector would be .form .input.
name (optional)
Define the alias of elements which would be used when retrieve desired element or print error message. For example:
//... name: 'Your Password', required: true, //...If you didn't fill out this field, the error message would be "Your Password is required"
match (optional)
The regular expression this field should match, the value must be a RegExp object.
sameAs (optional)
The value is the selector of the field which current field should be the same as. For example, if current field is password again
//... selector: '.password-again' name: 'Password Again' sameAs: '.password' // the password //...error & success
The value is a function which would be invoked when the field is valid or not
Error Object
When the form is invalid, we can get the error object array by this:
validator.errorMsgs.forEach(function(err){ // customize error message // ... })err object consists of name(the name of entity), attribute(the invalid type, like required, match), msg(The error message generated automatically according to the name).
for example:
$('.form').submit(function(){ if (validator.submit()) // all legal return true; validator.errorMsgs.forEach(function(err){ // customize error message if (err.name == 'Password again' && err.attribute == 'sameAs') { err.msg = err.msg + ' as password'; } var $err = $('<p class="text-danger">'+err.msg+'</p>') $('.form').prepend($err); }) return false; }) //form submit
