jQuery validation showErrors blocks highlight/unhighlight

Question

It appears to me that the jquery-validation showErrors blocks the action of highlight and unhighlight.

In html I have a required form-group:

        <form id="ValidationForm" method="post" class="form-horizontal" role="form" novalidate="novalidate">
                        <div class="form-group required">
                            <label class="col-xs-3 control-label" for="Letters">Letters</label>
                            <div class="col-xs-9 controls">
                                <input class="form-control input-md" id="Letters" name="Letters" type="text" placeholder="Letters" />
                            </div>
                        </div>
                       <div class="col-xs-4">
                            <input id="btnSave" class="btn btn-default" type="submit" value="Save Changes" name="btnSave">
                        </div></form>

In javascript I have rules for the validator defined:

var rules = {
    rules: {
        "Letters": { required: true }
    },
    submitHandler: function (form) {
        $('#btnSave').prop("disabled", true);
        form.submit();
    },
    highlight: function (element, errorClass) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element, errorClass) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    showErrors: function(errorMap, errorList) {
        $.each(this.successList, function(index, value) {
            return $(value).popover("hide");
        });
        return $.each(errorList, function(index, value) {
            var _popover;
            _popover = $(value.element).popover({
                trigger: "manual",
                placement: "auto",
                content: value.message,
                template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
            });
            _popover.data("bs.popover").options.content = value.message;
            return $(value.element).popover("show");
        });
    }
};
$("#ValidationForm").validate(rules);

If I remove the showErrors and press the submit button the form-group has the "has-errors" class added and the input border is displayed as red. When showErrors is added, this highlight functionality disappears. Any ideas why?

Solution

It appears to me that the jquery-validation showErrors blocks the action of highlight and unhighlight.

I'm not entirely sure what final effect you're trying to achieve since you never explained it. However, the highlight and unhighlight options are only used for controlling what happens when a message is supposed to appear next to an input. Whereas the showErrors option is used for creating a centrally locate summary of all errors someplace on the page. I don't know how or why you'd want to use the two together, and I'm not entirely certain how one option would "block" the other.

After looking at the code within your showErrors function, it appears that you're trying to create a popup effect for each message. In that case, showErrors is not the correct choice for this purpose.

You'd want to use the errorPlacement and success options for tooltips or popups. These options operate on each input one at a time as each error occurs, whereas showErrors will fire whenever there are errors anywhere on the form.

errorPlacement: function (error, element) {
    // put text of error into tooltip with $(error).text()
    // show tooltip
},
success: function (label, element) {
    // hide the tooltip
},

Refer to my answer below, which discusses this in more detail:

https://stackoverflow.com/a/28241902/594235