3

我正在尝试以qTips的形式显示 ASP.net MVC 客户端验证错误消息，方法是更改onError​​函数，jquery.validation.unobstrusive.js类似于在此处完成的方式。

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 Developers Tool 中，我将问题定位到这行代码：if (!error.is(':empty'). 即使提供了有效输入，此条件也会返回 true。

error变量：

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

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

4

2 回答 2

0

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

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

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

于 2013-02-25T10:44:05.560 回答
0

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

于 2013-02-27T08:27:07.303 回答