web-dev-qa-db-ja.com

RequiredFieldValidatorは、display：inlineをテキストに配置します

ASP.NETWebフォームにRequiredFieldValidatorとDisplay="Dynamic"があります。 CssClassプロパティを使用してクラスを割り当てました。 display: blockを使用してエラーメッセージを表示したいので、これをスタイルシートのcssクラスに配置しました。

残念ながら、バリデーターはWebページの要素にインラインで表示を配置し、スタイルシートの値を事実上上書きします。

私はそれを取り除くことができますか？

編集：

なぜこれが機能しないのか気づきました。バリデーターにDisplay="Dynamic"を設定すると、レンダリング時にスパンタグにstyle="display: none"を設定する効果があります。次に、.net javascriptライブラリは、要素のインラインスタイルをnoneとinlineの間で切り替えます。これが、動的バリデーターの仕組みです。したがって、これをブロック要素として表示するには、クライアント側のイベント検証の動作を変更する必要があります。それは可能ですか？

asp.netwebforms
25
Pete

多分これはあなたを助けることができます：
http://caliberwebgroup.blogspot.com/2009/02/overriding-javascript-in-webresourceaxd.html

3
Pieter Nijs

CSS属性セレクターと！importantを使用して実行しました。 FFで機能させるには、「contains」セレクターを使用する必要がありましたが、IE10、FF、およびChromeでテストしました。これまでのところ、機能しています。非常に簡単です。ここでは私のaspxページのサンプルバリデーターです：

<asp:RequiredFieldValidator runat="server" ID="rfvRequired" ErrorMessage="This is required.<br/>This is line 2" ControlToValidate="tbRequired" ValidationGroup="CommonAttributesValidationGroup" SetFocusOnError="True" CssClass="valerror" Display="Dynamic"></asp:RequiredFieldValidator>

次に、valerrorのスタイルがあります。

span.valerror[style*="inline"]
{
    display:block !important;
    background-color: Yellow;
    border: 1px solid #cccccc;
    font-size:.9em;
}

それだ。仕組み：スパンがスタイルを「display：none」から「display：inline」に変更すると、スパンの属性セレクターが作動し、強制的にブロックになります。上記のようなCSSエントリを1つ作成し、各バリデーターをそのクラスにする必要があります。

34
David

私がかつて使用した非常にハッキーな解決策（私は誇りに思っていませんが、機能しました）は、RequiredFieldValidatorをブロック要素である<div>でラップすることでした。したがって、RequiredFieldValidatorがインラインであっても、ブロックdiv内にあるため、ほとんどの場合、display：blockとして効果的に表示されます。

それはハッキーだったとあなたに言いました！

29
Henry C

JavaScriptで.netValidatorUpdateDisplay()メソッドをオーバーライドすることで機能し、closebodyタグの前に配置する必要があるソリューションを見つけました。

<script type="text/javascript">
    function ValidatorUpdateDisplay(val)
    {
        if (typeof (val.display) == "string")
        {
            if (val.display == "None")
            {
                return;
            }
            if (val.display == "Dynamic")
            {
                val.style.display = val.isvalid ? "none" : "block";
                return;
            }
        }
        if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1))
        {
            val.style.display = "inline";
        }
        val.style.visibility = val.isvalid ? "hidden" : "visible";
    } 
</script>
2
Paul Shoesmith

1つのオプションは、要素をフロートさせて、要素を「ブロックのように」動作させることです。

[〜＃〜] html [〜＃〜]

<div class="form-group clearfix">
  <asp:CustomValidator runat="server" Display="Dynamic" CssClass="help-block" />
</div>

[〜＃〜] css [〜＃〜]

span.help-block {
  float: left;
  width: 100%;
}
1
Khan

私はcssソリューションを試そうとしていましたが、あなたが投稿したもの（更新されたもの）を読んだ後、私は私のものに固執するかもしれないと思います。他の理由ですでにサーバーでバリデーターを構成する必要があったので、「controlToValidate」のコントロールタイプを確認してから、テキストボックスタイプのコントロールについては、メッセージの前に_<br />_タグを追加します。

例えば.
// Inline (if configured)
_myvalidator.Text = "<br />My message";_

// Normal message and validation summary (if configured)
_myvalidator.ErrorMessage = "My Message";_

これにより、インラインメッセージを正しく探しながら、検証サマリーで改行がレンダリングされないようにします。

Blackomenのアプローチも良いと思いますが、それも選択的に適用する必要があります。

1
Zambodi

float：leftをcssに設定するだけです

コントロールの前に必要なフィールドが表示されている場合は、上記のソリューションを使用して、改行タグ<br/>コントロールと必須フィールドバリデーターの間

0
Yogesh

現在および将来的に機能する簡単なソリューションがあります。

1）バリデーターにクラスを追加します
2）jqueryを使用して内部要素をバリデータスパンに追加するか、javascriptを使用します

function wrapValidators() {

    $('.input-error').wrapInner('<span class="block" />');
}

3）cssを「block」クラス「display：block」に追加します

0
dotnetnoob