2

私は動的フォームアプリを持っており、フォーム要素に適切で目立たない検証を適用しようとしていますが、フォームに検証エラーを表示するのに問題があります。

ラジオ ボタン フォーム アイテムをレンダリングする部分ビューは次のようになります。

@model FormItem

<div class="form-row">
<div class="form-item">@Model.Text</div>
<div class="form-item-responses">
    @foreach(FormItemResponse formItemResponse in Model.Responses.OrderBy(x => x.SortOrder))
    {
        if(Model.Required)
        {
            @Html.RadioButton(Model.Id.ToString(), formItemResponse.Id, formItemResponse.DefaultSelection, new { @class = "required", data_val = "true", data_val_required = "*"}) @formItemResponse.Text

        }
        else
        {
             @Html.RadioButton(Model.Id.ToString(), formItemResponse.Id, formItemResponse.DefaultSelection) @formItemResponse.Text
        }

        <text>&nbsp; &nbsp;</text>
    }
    <span class="field-validation-valid" data-valmsg-for="@Model.Id.ToString()" data-valmsg-replace="true"></span>
</div>

MVC に慣れていない人のために、最終的なマークアップを次に示します。

<div class="form-row">
<div class="form-item">Form Item Text Here</div>
<div class="form-item-responses">
    <input class="required" data-val="true" data-val-required="*" name="026d44a7-fa55-4fe8-8d2f-4f561c77c716" type="radio" value="dcfa4a9a-53e1-44d5-b6b3-a133673bfa2e" />Yes            &nbsp; &nbsp;
    <input class="required" data-val="true" data-val-required="*" name="026d44a7-fa55-4fe8-8d2f-4f561c77c716" type="radio" value="0042876b-2362-4f65-9c8a-dddf7f8206e8" />No            &nbsp; &nbsp;
    <input class="required" data-val="true" data-val-required="*" name="026d44a7-fa55-4fe8-8d2f-4f561c77c716" type="radio" value="a0918eab-93b6-4e45-a78d-301e28571037" />NA            &nbsp; &nbsp;
    <span class="field-validation-valid" data-valmsg-for="026d44a7-fa55-4fe8-8d2f-4f561c77c716" data-valmsg-replace="true"></span>
</div>

ラジオ ボタンの任意のグループが適切に検証*され、項目の横に が表示されるという点で機能します。しかし、私がやりたいのは、すべてのテキストの色.form-item-responsesを赤に変更することです。検証エラー メッセージだけではありません。

これどうやってするの？私はそのようなものを使ってinvalidHandlerみました:

 $("#items-form").validate({
      invalidHandler: function (form, validator) {
          var errors = validator.numberOfInvalids();
          console.log(errors);
          $("input.input-validation-error").each(function() {
              this.parent().css("color", "red");
          });
      }
  });

しかし、それはデフォルトの動作を上書きしThis field is required、各回答グループの最初のラジオ ボタンの横に黒を配置するように見えます。デフォルトの動作が必要で、この追加の変更だけが必要です。

4

1 に答える 1

1

これを修正した方法は、フォームから変数としてバリデータを取得し、次のように document.ready の設定にアクセスすることでした:

        var validatorData = $('#items-form').data('validator');
        validatorData.settings.highlight = function (element, errorClass) {
            $(element).parent().parent().css("color", "red");
        };

最初に試した方法がうまくいかなかった理由がわかりません。ドキュメントやオンラインの多くの例では、そのように思われます。

于 2012-10-15T14:45:18.217 に答える