）は（デフォルトHtml.ValidationSummaryではCSS

経由ボックスとにValidationSummaryを取り巻くこのようにHTMLを生成します。）は（デフォルトHtml.ValidationSummaryではCSS

<span class="validation-summary-errors">There were some errors...</span> 
<ul class="validation-summary-errors"> 
    <li>First Name too long</li> 
    <li>Invalid Email Address</li> 
</ul>

私は、全体の検証の概要を選択して、CSSを経由して、その周りにバウンディングボックスを追加したいです、

.validation-summary-errors{ 
background-color:#D9FFB2; 
border: 1px solid #5CBA30; 
color:#000000; 
margin-top:15px; 
margin-bottom:15px; 
}

これで、検証サマリーメッセージと各エラーメッセージの周りに別々のボックスが表示されるという問題があります。確かに私が心に持っていたものではありません。

私はこのような要約を中心にdiv要素を追加することができますが、検証エラーがない場合、これは空の赤いボックスになりますので、これは方法ではありません。

<div class="my-validation-summary"> 
     <h2> 
      <%=Model.Message%> 
     </h2> 
     <%= Html.ValidationSummary("There were some errors...")%> 
    </div>

、私はいくつか考えることができますこれを解決する方法は：

は自分のHtmlHelperのラッパー番目を書くjQueryの
を経由して、境界のdivを追加し、サーバー側のタグで条件付き境界div要素を追加します。 at CSSに優しい検証サマリーを印刷します

しかし、これらのすべては、このような単純なタスクを解決するのはかなり厄介です。これを行うにはより良い方法が必要です。おそらく、CSSクラスを書く他の方法のように、検証の要約がないときに空のボックスを取得しないでしょうか？

編集：編集2

<%=Html.ValidationSummary("There were some errors...") %>

：だけ明確にする、私はこのようなHTMLヘルパーを呼び出していますこの質問の範囲は、私が死んで、簡単に何かを見落としているかどうかを確認することでしたし、明らかです。私はそうしていないようですので、自分のニーズに合った独自のHtmlHelper関数を追加します。私は自分の質問を閉じるために投票しています。ここで

出典

2009-06-02 Adrian Grigore

妥当性検査の概要コントロールを一度カスタマイズしましたか？あなたが投稿したのと同じ方法で、デフォルトではレンダリングされません。 – RSolberg

いいえ、私はちょうどoverload ValidationSummaryメソッドを使用しています（上の最初の編集を参照してください） - Adrian Grigore 13秒前 –

私はMVCソースが利用できる方法が好きです - それを開いて、あなた自身で書いてください。幸運 –

が動作するいくつかのCSSです：

.validation-summary-errors { 
    background-color: #D9FFB2; 
    border:1px solid #5CBA30; 
    width: 400px; 
    } 
span.validation-summary-errors { 
    border-bottom-color: #D9FFB2; 
    display:block; 
    } 
ul.validation-summary-errors { 
    margin:0; 
    padding:0; 
    border-top:none; 
    }

あなたは他のCSSに応じて、幅で遊んでする必要があります。

編集はコメント

た後、私は余白とパディングをゼロにするためにul.validationサマリー・エラーを変更し、幅を削除しました。今はクロスブラウザで動作するはずです。

出典

2009-06-02 16:13:13 Emily

ほぼ:-)！これはFirefox 3では問題なく動作しますが、IE 7では機能しません。 http://content.screencast.com/users/sandra123/folders/Jing/media/a8523c9c-dfc7-44a4-8461-05d0e159677c/2009-06-02_1928 .png –

新しいバージョンのコードは動作しましたか？ IE7でプッシュされるリストを修正する必要があります。 – Emily

提供した2番目のコード例のように折り返しdivがある場合は、それから、jQueryを使用して、エラークラスをスパム& ulからその外側のdivに「移動」させるのは簡単でしょう。

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     var className = "validation-summary-errors"; 
     $("." + className).removeClass(className).closest("div").addClass(className); 
    }); 
    </script> 
    <style type="text/css"> 
    .validation-summary-errors { border: solid 1px red; }, 
    </style> 
</head> 

<body> 
    <div> 
    <h2>My Modal Message</h2> 
    <span class="validation-summary-errors">There were some errors...</span> 
    <ul class="validation-summary-errors"> 
     <li>First Name too long</li> 
     <li>Invalid Email Address</li> 
    </ul> 
    </div> 
</body> 
</html>

このコードは、このように見えるようにHTMLを操作します...

<div class="validation-summary-errors"> 
    <h2>My Modal Message</h2> 
    <span class="">There were some errors...</span> 
    <ul class=""> 
     <li>First Name too long</li> 
     <li>Invalid Email Address</li> 
    </ul> 
    </div>

出典

2009-06-02 16:22:29 jessegavin

私が言ったように、jQueryを使ってこの問題を解決するのは簡単です。しかし、これはかなり厄介な解決策のように思えます。 –

私はこの権利を読んでいると、あなただけspan.validation-summary-errors（とない内側の内容について）上の境界線をしたい場合は、：

.validation-summary-errors  {border: 0 none transparent; /* set defaults for inner */ 
           } 

span.validation-summary-errors {background-color:#D9FFB2; /* sets the span */ 
           border: 1px solid #5CBA30; 
           color:#000000; 
           margin-top:15px; 
           margin-bottom:15px; 
           }

はそれを行う必要があります。

あるいは、わずかに少ない確実：

.validation-summary-errors  {background-color:#D9FFB2; 
           border: 1px solid #5CBA30; 
           color:#000000; 
           margin-top:15px; 
           margin-bottom:15px; 
           } 

.validation-summary-errors > .validation-summary-errors, 
.validation-summary-errors .validation-summary-errors 
           {border: 0 none transparent; /* should apply styles to */ 
           }       /* the children/descendants */ 
                  /* with the same name - untested though... */

出典

2009-06-02 17:39:14

いいえ、検証要約とメッセージの両方を囲む1つの境界線が必要です。 –

別および必要に応じてソリューション。

@Html.ValidationSummary(false, "", new { @class = "YOUR CSS CLASS" })

出典

2017-11-01 20:07:14

）は（デフォルトHtml.ValidationSummaryではCSS

答えて

関連する問題