jquery.input.validator

This jquery plugin helps to handle html input validation by applying rules to elements based on html attributes.

It is inspired by jquery-validation but has less complexity, more comfort and is easy adjustable for complex setups. Read more in the Documentation.

It has a high test coverage and is tested with jquery >1.10, >2 and >3

Installation

 
bower install jquery.input.validator
 
# or 
 
npm install jquery.input.validator

Integration

Insert the following dependencies into your html file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="[path_to_your_bower_components]/jquery.input.validator/dist/jquery.input.validator.min.js">

Examples

Local pattern

$('form').iValidator({
  // custom configuration goes here
});
 
// validate all inputs in your form
var result = $('form').iValidator().validate();
if( result === true )
  console.log('all inputs valid');
 
// reset error hints
$('form').iValidator().reset();
 
// validate element
$('form').iValidator().validateOne(
                                    '<input type="email" value"invalid">'
                                  );

Gobal pattern

var validator = $('body').iValidator({
  // custom configuration goes here
});
 
// validate all inputs in your form
var result = validator.validate($('form'));
if( result === true )
  console.log('all inputs valid');
 
// reset the error messages
validator.reset($('form'));

Builtin validators

Validators are triggered from one or more attributes on an input element.

var validator = $('body').iValidator();
 
// validators by input type
validator.validateOne('<input type="email"  value"invalid">');
validator.validateOne('<input type="number" value"invalid">');
validator.validateOne('<input type="tel"    value"invalid">');
 
// validators by html5 attributes
validator.validateOne('<input type="text" required>');
validator.validateOne('<input type="text" minlength="1" maxlength="3">');
validator.validateOne('<input type="text" pattern="^\\d*$">');
 
// validators by data attributes
validator.validateOne('<input type="text" data-rule-decimal="true">');
validator.validateOne('<input type="text" data-has-class="hello" class="hello">');
 
// add a custom message for an validator
validator.validateOne('<input type="text" required data-msg-required="required!">');

Customize it all ♥️

All implementation specific logic can be replaced via config (see Documentation).