15

クライアント側の検証を使用する登録フォームがあります(ビューモデルで指定された必須、StringLengthなど)。フォームは現在、scaffolder が作成する方法とほぼ同じです。

@using (Html.BeginForm("Index", "Registration"))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Registration details</legend>
        @Html.ValidationSummary(false, "Please correct these errors:")
        @Html.ValidationMessageFor(model => model.Username)
        <div class="editor-label">
            @Html.LabelFor(model => model.Username)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Username)
        </div>
        <p>
            <input type="submit" value="Register" />
        </p>
    </fieldset>
}

唯一の違いは、ValidationMessageFor を ValidationSummary のすぐ下の右上に移動したことです。

私がやりたいことは、検証の概要にクライアント側の検証エラーを表示することです。現在、それらはフォームの上に表示されるだけで、検証の概要は使用されていません。検証の概要を使用してクライアント側の検証エラーを表示するにはどうすればよいですか? これは可能ですか？

アップデート

Darin 新しいプロジェクトであなたのコードを使用しました。これは、クライアント側の検証が開始されたときのように見えます。

クライアント側の検証 http://tinypic.com/images/404.gif

これは、検証の要約スタイルが適用された検証の要約に表示されることを期待していました。また、次のようなフォームを送信しました。

提出後

ありがとう、

b3n

4

6 に答える 6

8

この記事では、クライアント側の検証の概要を検証の概要に追加する方法について説明しているようです。

http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx

ただし、自分でテストしたわけではなく、コードとの違いはないようです。うまくいかない場合は、実際に検証エラーを発生させる関数の jquery.validate.unobtrusive.js ファイルを確認するとよいでしょう。

function onErrors(form, validator) {  // 'this' is the form element
    var container = $(this).find("[data-valmsg-summary=true]"),
        list = container.find("ul");

    if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors")
          .removeClass("validation-summary-valid");

        $.each(validator.errorList, function () {
            $("<li />").html(this.message).appendTo(list);
        });
    }
}
于 2011-05-21T13:35:53.317 に答える
6

プロジェクトで問題を解決しました。

  1. 設定ファイルに以下のキーを追加

<add key="ClientValidationEnabled" value="true"/>

  1. 検証の概要を表示する html ページに以下のコードを追加します。

    @Html.ValidationSummary(false)

  2. ビューからすべての @Html.ValidationFor 行を削除します。

于 2012-12-22T23:29:52.680 に答える
4

サンプル コードで確認できることからHtml.ValidationSummary、フォーム内に 2 つあります。最初のものはtrue引数として取り、すべてのプロパティ エラーを除外することを意味します。2 番目のものはfalse、クライアント側とサーバー側の両方の検証エラーを受け取り、機能します。例：

モデル：

public class MyViewModel
{
    [Required]
    [StringLength(5)]
    public string Username { get; set; }

    [Required]
    public string Name { get; set; }
}

コントローラ：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

意見：

@model AppName.Models.MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(false, "Please correct these errors:")

    @Html.ValidationMessageFor(model => model.Username)
    @Html.ValidationMessageFor(model => model.Name)

    @Html.LabelFor(model => model.Username)
    @Html.EditorFor(model => model.Username)

    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)

    <input type="submit" value="Register" />
}
于 2011-03-01T07:20:49.363 に答える
4

私は2日間の集中的な調査の後、この問題を解決しました.そして最後に、私は自分自身と私の実験で答えを見つけました!

バリデータの概要にクライアント側のバリデータ メッセージを表示するには、3 つの簡単な手順があります。

1- web.config<add key="ClientValidationEnabled" value="false" />のセクションに入れます<appSettings>

2- ビューに「false」属性の検証を追加します。@Html.ValidationSummary(false)

3-ValidationMessageFor(x => x.Property)ビュー内のすべてを削除します。

送信ボタンをクリックすると、クライアント側の検証メッセージが検証の概要に表示されます。

楽しみ！

于 2012-12-05T21:37:50.527 に答える
1

検証エラーメッセージは通常、デフォルトで検証サマリーの一部として表示されます。ValidationForは通常、どのコントロールを更新する必要があるかを明確にするために、検証エラーの原因となるコントロールと一緒に実行する必要があります。

于 2011-03-01T04:41:00.070 に答える
0

これと同じ問題がありました。次のスクリプトがページに含まれていることを確認して修正しました。

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")

それがあなたにとってもうまくいくことを願っています。

于 2014-04-23T13:49:15.573 に答える