web-dev-qa-db-ja.com

MVC3クライアント側の検証結果を検証の概要に表示する方法

クライアント側の検証を使用する登録フォームがあります（ビューモデルで指定された必須、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の右上に移動したことです。

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

更新

ダリン私は新しいプロジェクトであなたのコードを使用しました、そしてこれはクライアント側の検証が始まるとき私にとってどのように見えるかです：

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

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

After submit

ありがとう、

b3n

asp.net-mvcasp.net-mvc-3asp.net-mvc-2-validationvalidationsummary
15
b3n

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

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);
        });
    }
}
8
orcy

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

  1. 構成ファイルに以下のキーを追加します

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

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

    @Html.ValidationSummary(false)

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

6
AzizKapProg

サンプルコードで確認できることから、フォーム内には2つのHtml.ValidationSummaryがあります。最初のものは引数として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" />
}
4
Darin Dimitrov

私は2日間の徹底的な調査の結果、この問題を解決しました。最後に、自分自身と実験で答えを見つけました。

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

1- web.configの_<add key="ClientValidationEnabled" value="false" />_セクションに_<appSettings>_を配置します

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

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

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

楽しい！

4
Merlin47

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

1
Martin Booth

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

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

それがあなたにも役立つことを願っています。

0
Logan the guide