3_2.md

3.2 Error display

The showErrors function should remove previous errors and display new ones.

sourceId identifies the validation source. It prevents confusion between a field's own errors and errors coming from other sources. For example, user_email may have an Email constraint while the parent form has a UniqueEntity constraint that also reports an error on user_email.

By default, sourceId is used as a class name on error <li> elements so those errors can be removed independently.

showErrors reports an error list, not the state of a validation run: it is also called with an empty list when previous errors are cleared. Use the validation events to know when validation starts and how it ends.

Error path mapping

Custom constraints may return SvarohJsFormError objects when an error should be displayed on a child element instead of the element currently being validated. Set atPath to a child path from the validated element. Dot notation may be used for nested children.

function AppPaymentConstraint() {
    this.message = 'Choose a payment method.';
    this.groups = ['Default'];

    this.validate = function(value, element) {
        var error = new SvarohJsFormError(this.message);
        error.atPath = 'payment';

        return [error];
    };
}

If the path cannot be resolved, the error is displayed on the validated element. Constraints that return plain strings continue to display errors on the validated element.

$('#user_email').jsFormValidator({
    showErrors: function(errors, sourceId) {
        var list = $(this).prev('ul.form-errors');

        if (!list.length) {
            list = $('<ul class="form-errors"></ul>');
            $(this).before(list);
        }

        list.find('.' + sourceId).remove();

        for (var i in errors) {
            var li = $('<li></li>', {
                'class': sourceId,
                'text': 'custom_' + errors[i]
            });
            list.append(li);
        }
    }
});

Pure JavaScript:

var field = document.getElementById('user_email');
SvarohJsFormValidator.customize(field, {
    showErrors: function(errors, sourceId) {
        for (var i in errors) {
            // Render each error.
        }
    }
});