Visual Studio 2013を実行して、Bootstrapを使用して新しいASP.NET MVC(5)プロジェクトを作成しました。
ただし、控えめなクライアント側の検証を機能させることはできません。
モデルには関連するプロパティに[Required]
属性があり、ビューにはフォームの各フィールドにValidationMessageFor...
タグがあります。
ただし、フォームを送信すると、検証メッセージが表示される前にフォームがサーバーにポストバックされます。
NuGetを使用して、jquery.validate
とjquery.validate.unobtrusive
をインストールし、App_Start
のjqueryバンドルに追加しました。
それでも、頑固にサーバーにポストバックし続けています。 F12開発ツールでは、JSエラー/警告は表示されません。
他の誰かがこの問題に出くわしました(特にMVC 5に関連するSOには何も表示されません)。何かアイデアはありますか?
私は同じ問題を抱えていました。解決策は、マスターページ(_Layout.cshtml)に.js参照を追加することです
同じ問題がありました。生成された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")を介して追加する必要がありました。
確認しました<add key="ClientValidationEnabled" value="true" />
in web.config?
そうでなければ、これは良い概要を提供します: ASP.NET MVC 3:動的/ AJAXコンテンツの控えめなクライアント側検証に必要なステップ 。 MVC5にも有効です。
ページの下部に次を追加します。
@Scripts.Render("~/bundles/jqueryval")
すべてが正常に機能します。
すべての編集ビューに追加する代わりにMVCを使用してツアーを行うため、_Layout.cshtmlのview/sharedフォルダーに追加できます。
追加するだけ
@Scripts.Render("~/bundles/jqueryval")
_Layout.cshtmlの下部、上部に
@Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/jqueryval")
この場合、スクリプトはそのレイアウトを使用するすべてのページに影響します。
最初のMVCプロジェクトで遊んでいたとき、私は同じ問題を抱えていました。問題は、私がしなかったということでしたフォーム要素への入力要素を含む。はい、非常に愚かです。たとえば、フォームを作成してください:
@using (Html.BeginForm())
{
@Html.EditorFor(model => model.FieldA)
@Html.ValidationMessageFor(model => model.FieldA)
@Html.EditorFor(model => model.FieldB)
@Html.ValidationMessageFor(model => model.FieldB)
}
私はこれがゲームに少し遅れていることを知っていますが、これは検証にさらに追加するものであり、非常に役立つことがわかりました。他の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 ..
私は同じ問題を抱えていました、私の解決策はブラウザのすべての履歴(キャッシュ、Cookie、フォームなど)をクリアし、すべてが正しく動作します。
私は将来の読者にこの答えを提供しています。私は同じ問題を扱っていましたが、問題はレンダリングスクリプトのシーケンスにあります。確認してください
@Scripts.Render("~/bundles/jquery")
前です
@Scripts.Render("~/bundles/jqueryval")
_layout.cshtmlで。レイアウトの下部は次のようになります。
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
@ Html.ValidationMessageForがテンプレートから欠落していると思います。エラーは表示されますが、メッセージは表示されません。