h5validator.js

Getting started

Download

• h5validator.js

HTML

Require jQuery.

...
<form id="form">
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="Your email">
    ...
</form>
...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="h5validator.js"></script>
...

CSS

e.g.

#form .valid {
    border: 1px solid #3c763d;
}
#form .invalid {
    border: 1px solid #a94442;
}

Via data attributes

Require "js-h5validator" class.

<form class="js-h5validator" data-validClass="success" data-invalidClass="error" data-events="change">
   ...
</form>

Via JavaScript

$('#form').h5validator({
    validClass  : 'success',
    invalidClass: 'error',
    events      : 'change'
});

Option

validClass

• [String]
• Add this class when value is valid.

invalidClass

• [String]
• Add this class when value is invalid.

events

• [String]
• Run validate when these events are fired.

Event

check.validate

This event is fired when form is checked.

$('#form').on('check.validate', function(e){
    var $target = $(e.relatedTarget);

    $target
        .next('.feedback')
        .removeClass('feedback-success')
        .removeClass('feedback-error')
        .addClass(e.isValid ? 'feedback-success' : 'feedback-error')
        .html(e.isValid ? 'success' : 'error');

    console.log(e.checkResult);

    e.relatedTarget; // -> target selector
    e.isValid;       // -> true or false
    e.checkResult;   // -> result object
});

DEMO

source