7

ここに画像の説明を入力

MVC 3 検証を使用しています。私の製品マネージャーは、エラーのある各コントロールのラベルを赤くしたいと考えています。

そのため、'Student First Name' ラベルが赤くなります。「メールアドレス」ラベルが赤くなります。

各エラーメッセージを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 が起動されません。

4

2 に答える 2

6

クライアント側の検証が無効です:

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');
                });
        }
    });
于 2012-09-06T19:37:26.803 に答える
0

以下は、送信ボタンがクリックされたときにエラー クラスを追加 (または削除) することで、含まれている div タグに色を付ける JQuery 関数です。クラスをラベルに追加するように簡単に変更できます。

 $('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');
            }
        });
    }
});
于 2014-06-05T22:02:34.517 に答える