3_12.md

3.12 Run validation on a custom event

This example validates text fields on blur and adds marker classes instead of rendering error messages:

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 the field receives focus.
        $(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');
            }
        }
    });