qTip2 validation does not disappear when input becomes valid

Question

I am trying to display ASP.net MVC client-side validation error messages in the form of qTips by changing the onError function in jquery.validation.unobstrusive.js similar to how it is done here.

function onError(error, inputElement) {  // 'this' is the form element        
    var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
    replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

    // Remove the following line so the default validation messages are not displayed        
    // container.removeClass("field-validation-valid").addClass("field-validation-error");

    error.data("unobtrusiveContainer", container);

    if (replace) {
        container.empty();
        error.removeClass("input-validation-error").appendTo(container);
    }
    else {
        error.hide();
    }

    /**** Added code to display the error message in a qTip tooltip ****/        
    // Set positioning based on the elements position in the form
    var elem = $(inputElement),
        corners = ['left center', 'right center'],
        flipIt = elem.parents('span.right').length > 0;

    // Check we have a valid error message
    if (!error.is(':empty')) {
        // Apply the tooltip only if it isn't valid
        elem.filter(':not(.valid)').qtip({
            overwrite: false,
            content: error,
            position: {
                my: corners[flipIt ? 0 : 1],
                at: corners[flipIt ? 1 : 0],
                viewport: $(window)
            },                
            show: {
                event: false,
                ready: true
            },
            hide: false,
            style: {
                classes: 'qtip-red' // Make it red... the classic error colour!
            }
        })

        // If we have a tooltip on this element already, just update its content
        .qtip('option', 'content.text', error);
    }

    // If the error is empty, remove the qTip
    else { elem.qtip('destroy'); }
}

My model:

public class Model
{
    [DataType(DataType.Currency)]
    [Range(typeof(decimal), "0", "79228162514264337593543950335")]
    public decimal Amount { get; set; }
    // bunch of other properties
}

Everything works fine and the errors (e.g. The Amount field is required) are displayed in qTips. However when I change my input to a valid value, the qTip does not disappear. Here are the exact steps:

1. Input an invalid value for the Amount field
2. qTip appears with the correct error message when input focus is lost
3. Update the input with a valid value
4. qTip did not close

From Chrome Developers Tool, I pinpointed the problem to this line of code: if (!error.is(':empty'). This condition returns true even if a valid input is provided.

The error variable:

[<span for=​"Amount" class>​</span>​]

I wonder why the above condition returns true even though the span is empty? I want the qTip to close automatically when the input becomes valid.

Answer 1

It turns out to be a qTip2 bug. I updated my build and everything works fine.