qTip2 验证在输入变为有效时不会消失

Question

我正在尝试通过更改jquery.validation.unobstrusive.js 中的onError 函数以类似于here 的方式以qTips 的形式显示ASP.net MVC 客户端验证错误消息。

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'); }
}

我的模特：

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

一切正常，错误（例如，金额字段是必需的）显示在 qTips 中。但是，当我将输入更改为有效值时，qTip 不会消失。以下是具体步骤：

1. 为Amount 字段输入无效值
2. 当输入焦点丢失时，qTip 会显示正确的错误消息
3. 使用有效值更新输入
4. qTip 没有关闭

通过 Chrome 开发者工具，我将问题定位到这行代码：if (!error.is(':empty')。即使提供了有效的输入，此条件也会返回 true。

error 变量：

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

我想知道为什么即使span 为空，上述条件仍返回true？我希望 qTip 在输入有效时自动关闭。

Answer 1

不显眼的代码看起来是正确的。我之前在 QTip 中使用过它并且可以正常工作。

听起来好像还有一条验证规则没有得到满足。值得检查浏览器开发工具中的代码，以了解该字段存在哪些验证属性。

我还会检查您的开发工具控制台以检查没有客户端错误。

Answer 2

原来是qTip2 bug。我更新了我的构建，一切正常。