web-dev-qa-db-ja.com

Bootstrapを使用してASP.NET MVC5でクライアント側の検証が機能しない

Visual Studio 2013を実行して、Bootstrapを使用して新しいASP.NET MVC（5）プロジェクトを作成しました。

ただし、控えめなクライアント側の検証を機能させることはできません。

モデルには関連するプロパティに[Required]属性があり、ビューにはフォームの各フィールドにValidationMessageFor...タグがあります。

ただし、フォームを送信すると、検証メッセージが表示される前にフォームがサーバーにポストバックされます。

NuGetを使用して、jquery.validateとjquery.validate.unobtrusiveをインストールし、App_Startのjqueryバンドルに追加しました。

それでも、頑固にサーバーにポストバックし続けています。 F12開発ツールでは、JSエラー/警告は表示されません。

他の誰かがこの問題に出くわしました（特にMVC 5に関連するSOには何も表示されません）。何かアイデアはありますか？

jqueryasp.netasp.net-mvctwitter-bootstrapasp.net-mvc-5
28
SimonGoldstone

私は同じ問題を抱えていました。解決策は、マスターページ（_Layout.cshtml）に.js参照を追加することです

  1. jquery.validate.js
  2. jquery.validate.unobtrusive.js
22
user2934829

同じ問題がありました。生成されたHTMLを動作するサイトと比較すると、ドキュメントの最後に次のようになっていることがわかりました。

<script src="/bundles/jqueryval"></script>

...一方、バンドルは次のように拡張されているはずです。

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

App_Start/BundleConfig.csを調べましたが、JQuery検証バンドルはRegisterBundlesで定義されていませんでした。追加する必要がありました：

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

なぜこれが欠けていたのか、私にはわかりません。私は新しい、きれいなプロジェクトから始めました。

未定義のバンドルを参照するときにコンパイル時エラーが発生しないのはかなり見苦しいです。常時実行時エラーであっても、サイレント障害よりも優れています。無駄な時間です！

編集：私のプロジェクトにもJQuery検証スクリプトがありませんでした。 NuGet（ "Microsoft JQuery Unobtrusive Validation"）を介して追加する必要がありました。

21
Gary McGill

確認しました<add key="ClientValidationEnabled" value="true" /> in web.config？

そうでなければ、これは良い概要を提供します： ASP.NET MVC 3：動的/ AJAXコンテンツの控えめなクライアント側検証に必要なステップ 。 MVC5にも有効です。

14
flip

ページの下部に次を追加します。

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

すべてが正常に機能します。

8
Maulik Anand

すべての編集ビューに追加する代わりにMVCを使用してツアーを行うため、_Layout.cshtmlのview/sharedフォルダーに追加できます。

追加するだけ

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

_Layout.cshtmlの下部、上部に

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

この場合、スクリプトはそのレイアウトを使用するすべてのページに影響します。

3
nasolev

最初のMVCプロジェクトで遊んでいたとき、私は同じ問題を抱えていました。問題は、私がしなかったということでしたフォーム要素への入力要素を含む。はい、非常に愚かです。たとえば、フォームを作成してください：

@using (Html.BeginForm())
{
    @Html.EditorFor(model => model.FieldA)
    @Html.ValidationMessageFor(model => model.FieldA)

    @Html.EditorFor(model => model.FieldB)
    @Html.ValidationMessageFor(model => model.FieldB)

}
2
veb

私はこれがゲームに少し遅れていることを知っていますが、これは検証にさらに追加するものであり、非常に役立つことがわかりました。他のjqueryバージョンを参照するjavascript/jQueryプラグイン/ API参照（eg：searchMeme.js）の競合が問題を引き起こす場合があるため、アカウントログインアクション用の一意のバンドルを作成します。これらは私がとるステップです：

1.別のレイアウトを作成する~/Views/Shared/_AccountLayout.cshtml forAccountController.cs。

2.新規作成~/Account/_ViewStart.csthml with：

_@{
    Layout = "~/Views/Shared/_AccountLayout.cshtml";
}
_

3. AccountControllerのBundleConfig.csにcssおよびjsの2つのバンドルを作成します。

_   bundles.Add(new StyleBundle("~/Content/accountcss").Include(
                "~/Content/site.css",
                "~/Content/bootstrap.css",
                "~/Content/font-awesome.css")); /*if using font-awesome */

   bundles.Add(new ScriptBundle("~/bundles/accountjs").Include(
                "~/Scripts/jquery-1.10.2.js",
                "~/Scripts/jquery.validate.js",
                "~/Scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/bootstrap.js"));//must be after jquery validate
_

4.head＆body /の両端のバンドルを参照in _AccountLayout.cshtmlなど：

_        <title>@ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
         @Styles.Render("~/Content/accountcss")
        @Scripts.Render("~/bundles/modernizr")
        @this.RenderSection("MetaContent", false)
        @this.RenderSection("Styles", false)
        </head>

        @Scripts.Render("~/bundles/accountjs")
        @this.RenderSection("Scripts", false)
        </body>
_

*注：確認してくださいbootstrapはバンドルのjqueryvalの後にあります

5.~/Account/Login.cshtml内の各入力フィールドに_@Html.ValidationMessageFor_があることを確認してください/、~/Account/Register.cshtmlなど。

_<div class="form-group">
       @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
          <div class="col-md-10">
               @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
               @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
          </div>
</div>
_

6. DataAnnotationsを使用して、追加のカスタム検証エラーを作成します[RegularExpression(@"^([\w]{2,20})@?([\w]{2,20}).?[a-zA-Z]{2,3}$", ErrorMessage="")]：

_[Required(ErrorMessage = "*Username is required."), RegularExpression(@"^[\w+]{3,10}\s?([\w+]{3,15})$", ErrorMessage = "*Username can only be Alphanumeric"),StringLength(25, ErrorMessage = "The {0} must be at least {2} characters long and no bigger than {1} characters.", MinimumLength = 5)]
public string UserName { get; set; }
_

7。 （オプション）最後に、パスワードのDataAnotationを変更した場合、[〜＃〜] must [〜＃〜]でパスワードポリシーも変更する必要があります~/App_Start/IdentityConfig.csなど：

_manager.PasswordValidator = new PasswordValidator
{
    RequiredLength = 6,
    RequireNonLetterOrDigit = false,
    RequireDigit = true,
    RequireLowercase = true,
    RequireUppercase = true,
};
_

8。 （オプション）また、これをチェックしてください article on Roles ..

2
yardpenalty

私は同じ問題を抱えていました、私の解決策はブラウザのすべての履歴（キャッシュ、Cookie、フォームなど）をクリアし、すべてが正しく動作します。

2
Kien

私は将来の読者にこの答えを提供しています。私は同じ問題を扱っていましたが、問題はレンダリングスクリプトのシーケンスにあります。確認してください

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

前です

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

_layout.cshtmlで。レイアウトの下部は次のようになります。

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

@ Html.ValidationMessageForがテンプレートから欠落していると思います。エラーは表示されますが、メッセージは表示されません。

0
jgarza