###前提・実現したいこと
Validationのエラー時に、テキストボックスをハイライトしたい。
###発生している問題・エラーメッセージ
ASP.NET MVC5 実践プログラミングという参考書で
チュートリアルを学んでいます。
p.246の入力値の検証という章において、
検証エラー時にテキストボックスをハイライトするサンプルがあるのですが、
上手く動作しません。
説明では、Content/Site.cssに
.input-validation-errorのスタイルを設定すればハイライトできると書いてあるのですが、ハイライトできません。
サーバ起動後の検証エラー発生時に、サーバ側のSite.cssを修正(.input-validation-errorを有効にする)し、保存すると検証エラーの対象となっているテキストボックスがハイライトされていることから、
クラスの指定は正しそうです。(やりたいことは、検証エラーと同時にハイライトしたい)
JavaScript等、クライアントサイドの制御に疎く、
原因が分からないためお力を借りたいです。
サンプルは以下URLのダウンロードから入手可能です。
落としたファイルのMvcModelで動作確認ができます。
ダウンロードサイト
以上、よろしくお願いいたします。
###該当のソースコード
Content/Site.css
.input-validation-error { background-color: #ffeeee; }
Web.config
<appSettings> <add key="webpages:Version" value="3.0.0.0" /> <add key="webpages:Enabled" value="false" /> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="false" /> </appSettings>
Views/Members/Create.cshtml
@model MvcModel.Models.Member @{ ViewBag.Title = "Create"; } <h2>Create</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Member</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) </div> </div> <!-- 省略 --> </div> </div> </div> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
展開後のhtml
<!-- 省略 --> <div> <a href="/Members">Back to List</a> </div> <hr /> <footer> <p>© 2017 - マイ ASP.NET アプリケーション</p> </footer> </div> <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/bootstrap.js"></script> <script src="/Scripts/respond.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script> <script src="/Scripts/blackword.js"></script>
動作確認手順
1.サーバを起動する。
2.下記のURLからユーザ作成画面に移る。
http://localhost:ポート/Members/Create
3.下記の例のように検証エラーを発生させる。
名前に半角英数字、メールアドレスと認識できない文字を入力、Saveを実行
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/06 04:19
2017/05/06 04:24
退会済みユーザー
2017/05/06 05:08
2017/05/06 07:02
退会済みユーザー
2017/05/06 07:40