jQuery Validation not showing correct errors when overriding errorPlacement

Question

I'm replacing the default errors with tooltips from bootstrap overriding the errorPlacement method. But when items are required and also have any other type of validation, the required supersedes any other error.

I'm wondering if I'm missing something in the validation or if this is expected behavior.

An example in jsfiddle is here: http://jsfiddle.net/CwnUR/8/

$(function() {
    $('form').validate({
       errorElement: 'span',
       errorClass: 'error',
       validClass: 'success',
       errorPlacement: function (error, element) {

            element.attr({ 'title': error.text() }).tooltip({
                placement: 'right',
                trigger: 'manual',
                delay: { show: 500, hide: 5000 }
            }).tooltip('show');

        },
        success: function (label, element) {
            $(element).tooltip('destroy');
        }
    });

    $("#exampleInputEmail1").rules("add", {
        required: true,
        email: true
    });

    $("#exampleInputEmail2").rules("add", {
        required: true,
        equalTo: $("#exampleInputEmail1"),
        messages: {
            equalTo: 'Please retype the same email again.'
        }
    });

});

SparoHawk · Accepted Answer · 2014-03-14 14:42:33Z

2

The problem is that the tooltip is not updating properly. When an error firsts triggers it displays the correct warning. For example, if I click submit with an empty email address I get the correct error saying the field is required. Any subsequent tries to get any other error (like invalid email address) do not show. But, it I write some text before I hit submit, I get the invalid email address error and then that supersedes any other error.

So, what I did to make it work was to destroy the tooltip inside the errorPlacement function.

Code extract:

errorPlacement: function (error, element) {
    $(element).tooltip('destroy');
    element.attr({
        'title': error.text()
    }).tooltip({

answered Mar 14, 2014 at 14:42

SparoHawk

5572 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael D. Irizarry Over a year ago

Perfect! I knew it was something simple. Thanks!

Collectives™ on Stack Overflow

jQuery Validation not showing correct errors when overriding errorPlacement

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related