質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

ASP.net MVC5 Validationのエラー時に、テキストボックスをハイライトしたい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,467

ikasoumen

score 107

前提・実現したいこと

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>&copy; 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を実行

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

ブラウザのキャッシュを消去してから試してみたらどうなりますか?

【追記】

キャッシュのせいではないかと言っておいてハズレだったら何なので、Visual Studio 2015 Community のインターネット用のテンプレートを使って、MVC5, .NET 4.6.1 アプリ作って、site.css に以下の CSS を追加して検証してみました。

input.input-validation-error {
    border: 1px solid #e80c4d;
    background-color: #ffeeee;
}

結果は以下の画像(どうしてもここに貼れないので自分のサーバーにアップしてその URL を以下に書いておきます)の通り、検証結果 NG の場合テキストボックスの枠と背景の色が CSS に設定したように変わります。

http://surferonwww.info/BlogEngine/image.axd?picture=2017%2f5%2fmvc5Validation.jpg

ただし、テキストボックスにフォーカスが当たっている場合(上の画像の一番下のテキストボックス)、他のスタイル(たぶん bootstrap.css のもの)が優先的に適用されるようで、枠は青になります。背景の方はフォーカスが当たっているか否かの影響はなく、検証結果 NG で #ffeeee にななります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/06 14:08

    > F5でリロードしてるから読み込まれているだろうと盲目的な思考でした。

    F5 キーでリロードした場合、site.css に対する要求の応答には HTTP 304 Not Modified(ヘッダのみでコンテンツは送信しない。ブラウザのキャッシュを使えという指示と同じ)を返すと思います。なので、キャッシュが使われたのでしょう。

    Web 開発の基本として、問題が起きたらパケットキャプチャツールを使って要求・応答を見ることをお勧めします。自分的には Fiddler が使いやすいのでお勧めです。Chrome のデベロッパーツールでもキャプチャは可能です。

    Fiddler のお勧め
    http://surferonwww.info/BlogEngine/post/2011/05/25/Recommendation-of-Fiddler.aspx

    キャンセル

  • 2017/05/06 16:02

    Fiddlerですか、なんかハッカーぽいですね。

    正直ステータスコードは、200とそれ以外ぐらいにしか思っていなかったので、
    この機会にどんなレスポンス返しているのかみてみたいと思います。(Teratailとか)

    キャンセル

  • 2017/05/06 16:40

    > Fiddlerですか、なんかハッカーぽいですね。

    そういうものではなくて、Web アプリの開発ツールとして必須に近いものだと自分は思っているのですが。

    今回の例でも、Fiddler で見れば、以下の記事の画像のように 304 応答が返ってきているのは一目でわかったので、解決が早かったのではないかと思います。

    http://surferonwww.info/BlogEngine/post/2015/05/19/cache-control-by-using-http-handler.aspx

    個人的に特に真価を発揮すると思っているのが、jQuery.ajax を使ってデータをやり取りする場合。

    どういうデータが送信されているか、送信先は正しいか、サーバーから応答は帰ってきているか、応答の内容は期待通りか、エラーが出ている場合サーバーから遅れれてきたエラーメッセージの内容はどういうものか・・・等々を調べるのに有用です。

    今度またこういう機会があったら使ってみてください。Fiddler 無しでは半日悩むところが、5 分で解決するかもしれません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る