3_12.md

3.12 Run validation on custom event

This is a real example, how to validate text fields on their change, and add error-markers instead of showing errors:

input[type=text].error, textarea.error {
    border: 1px solid red;
}
input[type=text].ready, textarea.ready {
    border: 1px solid green;
}

$('form')
    .find('input[type=text], textarea')
    .blur(function(){
        // Run validation for this field
        $(this).jsFormValidator('validate')
    })
    .focus(function() {
        // Reset markers when focus on a field
        $(this).removeClass('error');
        $(this).removeClass('ready');
    })
    .jsFormValidator({
        'showErrors': function(errors) {
            if (errors.length) {
                $(this).removeClass('ready');
                $(this).addClass('error');
            } else {
                $(this).removeClass('error');
                $(this).addClass('ready');
            }
        }
    });