asp.net-mvc-3 - MVC 3 验证：想要将与验证失败的控件相对应的标签变为红色

Question

我正在使用 MVC 3 验证。我的产品经理希望每个有错误的控件的标签变为红色。

所以“学生名字”标签应该变成红色。“电子邮件地址”标签应变为红色。

我试图将每个错误消息包装在一个 div 中并检查每个 div 的长度

<div id="divValStudentFirstName">@Html.ValidationMessageFor(m => m.studentFirstName)</div>

在一个 js 文件中：

$(document).ready(function () {

    if ($("#divValStudentFirstName").length > 1) {
                ("#divStudentFirstName").css("color", "red");

    }

但我没有成功。验证检查是在没有完全刷新的情况下完成的，因此，当验证命中时，我的 $(document).ready 不会被触发。

Answer 1

客户端验证已禁用：

public static IHtmlString ValidationLabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, string labelText = null) {
            var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
            var name = ExpressionHelper.GetExpressionText(expression);
            string resolvedLabelText = labelText ?? metadata.DisplayName ?? metadata.PropertyName ?? name.Split('.').Last();
            if (String.IsNullOrEmpty(resolvedLabelText)) {
                return MvcHtmlString.Empty;
            }

            var tag = new TagBuilder("label");
            tag.Attributes.Add("for", TagBuilder.CreateSanitizedId(html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name)));
            tag.GenerateId(name);
            tag.SetInnerText(resolvedLabelText);
            ModelState modelState;
            string fullName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name);
            if (html.ViewData.ModelState.TryGetValue(fullName, out modelState)) {
                if (modelState.Errors.Count > 0) {
                    tag.Attributes.Add("style", "color:red");
                }
            }
            return new MvcHtmlString(tag.ToString());
        }

编辑

启用客户端验证

我真的不是 js 的王者，但这似乎有效（至少在一个简单的情况下）

$('form').submit(function () {
        var form = $(this);
        $('label').removeClass('field-validation-error');
        if (!form.valid()) {
            $('.input-validation-error')
                .each(function () {
                    $("label[for='" + $(this).attr("id") + "']").addClass('field-validation-error');
                });
        }
    });

Answer 2

下面是一个 JQuery 函数，它通过在单击提交按钮时添加（或删除）错误类来为包含的 div 标签着色。可以轻松更改以将类添加到标签。

 $('form').submit(function () {

    if ($(this).valid()) {
        $(this).find('div.form-group').each(function () {
            if ($(this).find('span.field-validation-error').length == 0) {
                $(this).removeClass('error-colored');
            }
        });
    }
    else {
        $(this).find('div.form-group').each(function () {
            if ($(this).find('span.field-validation-error').length > 0) {
                $(this).addClass('error-colored');
            }
        });
    }
});