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).

Resources

• Documentation
• Changelog
• Contributing

Dependencies

• jquery >=1.10.0 (also tested with >=2, >=3)

Services

• on github.com
• on bower.io
• on npmjs.org
• build status

Authors

Tom Hanoldt

Support on Beerpay

Hey dude! Help me out for a couple of 🍻!