更改 jQuery 自定义样式以进行验证，使其显示为工具提示

Question

我是 jQuery 新手，在自定义验证元素的样式（ASP.NET MVC3 项目）方面有些挣扎。我知道我可以更改field-validation-error、input-validation-error 等的 CSS，但我想要实现的效果如下（使用 jQuery 1.5.1 和 jQuery UI 1.8.11）：

对于标签/输入元素组合，我想在验证失败时更改标签颜色（现在只有输入元素的背景颜色变为浅红色）。此外，我想在输入元素的右侧显示一个错误图标（这可行），并将错误消息作为工具提示（这不起作用）。

此外，当将鼠标悬停在表单的提交按钮上时，我希望验证摘要显示为自定义样式的工具提示（不知道如何完成此操作）。

通常，我的表单验证确实有效，但我想如上所述更改元素的样式。我不明白为什么validate 函数似乎没有触发（这里我想我可以从errorPlacement 等开始）。我的代码如下：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
$(document).ready( function()
{
    $("form").validate({
        debug: true,
        errorPlacement: function(error, element)
        {
            error.insertBefore(element);
        },
        submitHandler: function()
        {
            alert("submit");
        }
    });
});
[...]
@using(Html.BeginForm())
{
    [...]
    <td>@Html.LabelFor(model => model.SomeField)</td>
    <td>
        @Html.EditorFor(model => model.SomeField)
        @Html.ValidationMessagesFor(model => model.ValidFrom)
    </td>
    [...]
    @Html.ValidationSummary(false);
    <input id="btnSubmit" name="submit" type="submit" value="Send" />
}

尽管设置了debug: true 并为submitHandler 定义了alert，但我在Firefox 的Web 开发人员控制台上看不到任何（与验证相关的）输出。当表单有效时单击提交按钮时，我也看不到alert 消息，它只是被发布到服务器。我还尝试显式设置表单 ID 并在 jQuery 中访问它：

$("#myForm")...
[...]
@using(Html.BeginForm("Action","Controler", FormMethod.Post, new { id = "myForm" }))
{
    [...]

不幸的是，这并没有改变任何东西。如何如上所述设置我的验证元素的样式？为什么validate 函数没有触发？

Answer 1

尝试put class修改asp.net mvc的默认设计

例如：

@Html.ValidationMessageFor(
          model => model.Property1, string.Empty, new 
          { 
              @class = "new-style-error-validation" 
          }
)

Answer 2

这确实花了我一段时间，其中包括我必须做/了解/修复的几件事。不过，在撰写本文时，我首先更新到了最新版本的 jQuery (1.9.2) 和 jQuery UI (1.10.3)。

首先，我一直想知道为什么我所有的尝试都改变了我的问题中描述的验证逻辑的行为。事实证明，对于ASP.NET MVC，您不能只使用在许多页面上找到的“普通”jQuery 示例，您必须首先获得对验证器的引用：

// #popupDialog and #Formular are the CSS ids of my modal dialog and form.
var validator = $("#popupDialog").find("#Formular").data("validator");

下一步是用空函数覆盖errorPlacement，否则原始验证样式总是被激活：

validator.settings.errorPlacement = function () {
};

现在更简单的部分是通过简单地选择源自实际输入元素的父/子元素来更改实际输入元素前后元素的样式：

validator.settings.highlight = function (element) {
    $(element).parent().parent().find("label:first").addClass("error");
    $(element).parent().parent().find("span.required").addClass("error");
    $(element).parent().parent().find("input:first").addClass("errorImage");
    $(element).parent().parent().find("select:first").addClass("errorImage");
    var errorMessage = $(element).attr("data-val-required");
    if (errorMessage) {
        $(element).parent().parent().find("input:first").attr("custom-error-message", errorMessage);
        $(element).parent().parent().find("select:first").attr("custom-error-message", errorMessage);
    }
};
validator.settings.unhighlight = function (element) {
    $(element).parent().parent().find("label:first").removeClass("error");
    $(element).parent().parent().find("span.required").removeClass("error");
    $(element).parent().parent().find("input:first").removeClass("errorImage");
    $(element).parent().parent().find("select:first").removeClass("errorImage");
    $(element).parent().parent().find("input:first").attr("custom-error-message", "");
    $(element).parent().parent().find("select:first").attr("custom-error-message", "");
};
validator.settings.errorContainer = "#btnSubmit";

关于上述代码行需要注意的一点是，我没有使用title 属性作为错误消息，而是使用custom-error-message（或者你喜欢的任何名称）。这是由于我在使用无效的DropDownList 控件时遇到的问题 - 我无法再单击箭头并从列表中选择一个项目，因为控件直接失去了焦点（这也是我在手动设置时发现的问题title 通过 jQuery 中的 .attr(... 而不是通过 .prop(...)。

上面使用的 CSS 类和样式可以是任何你喜欢的，而且你想要样式的元素可以根据你的需要进行更改。选择所需元素可能有更简单、更稳定的方法，但基本上上述解决方案对我有用，如果你有类似的问题，应该足以让你开始。

对于submit 按钮，我决定显示静态文本而不是所有无效控件错误消息的列表，但是如果您需要添加动态文本，下面使用的方法应该仍然有用：

$(document).tooltip({
    position:
        {
            my: "left bottom-15px",
            at: "center top",
            using: function (position, feedback) {
                $(this).css(position);
                $("<div>")
                    .addClass("arrow")
                    .addClass(feedback.vertical)
                    .addClass(feedback.horizontal)
                    .appendTo(this);
            }
        },
    items: ".errorImage, input[type='submit']", // restrict to certain elements
    content: function () {
        var element = $(this);
        if (element.is("[custom-error-message]")) {
            return element.attr("custom-error-message");
        }
        else {
            if ($("#Formular").valid()) {
                return "";
            }
            else
            {
                return "<span class='error'>Input validation</span><br />Some informative text.";
            }
        }
    }
});

如果还有更多问题，请随时提出，根据我自己的经验，我知道让这一切工作起来可能是一场噩梦，尽管最终看起来并不太难。