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

尝试使用class来修改asp.net mvc的默认设计

e.g。：

@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控件的问题 - 我无法点击箭头并从列表中选择一个项目，因为控件直接失去焦点（这，顺便说一句也是我发现的问题）在jQuery中通过title手动设置.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.";
            }
        }
    }
});

如果有更多问题请随意提问，我从自己的经验中知道，让整个事情发挥作用可能是一场噩梦，即使最终看起来并不太困难。

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

2 个答案: