2

我是 jQuery 新手，在自定义验证元素的样式（ASP.NET MVC3 项目）方面有点挣扎。我知道我可以更改 CSSfield-validation-error等input-validation-error，但我想要实现如下（使用 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" />
}

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

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

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

4

2 回答 2

1

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

例如：

@Html.ValidationMessageFor(
          model => model.Property1, string.Empty, new 
          { 
              @class = "new-style-error-validation" 
          }
)
于 2013-05-03T07:54:46.647 回答
0

这真的花了我一段时间，包括我必须做/找出/修复的几件事。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.";
            }
        }
    }
});

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

于 2013-05-07T13:40:53.737 回答