2012-05-12 23 views
12

ASP必須フィールド検証を使用して、ASP.NETページの一部のテキストボックスを検証したいとします。そして、そのエラーメッセージをページの上部に表示したいと思います。ASPページで検証エラーメッセージが発生しない場合は不要な領域を非表示にします

<table> 
    <tr><td colspan='2'><b> User Input</b><br/></td></tr> 
    <tr><td colspan='2'> 
      <%--input validations--%> 
      <asp:RegularExpressionValidator ID="regexpName1" runat="server"  
       ErrorMessage="This expression does not validate." 
       ControlToValidate="TextBox_adTitle"  
       ValidationExpression="^[a-zA-Z'.\s]{1,40}$" /> 
      <br /> 
      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
       ControlToValidate="TextBox_1" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator> 
     <br /> 
     </td> 
    </tr> 
    <tr><td> 
     <asp:Label ID="Label_name" runat="server" Text="Seller Name * "></asp:Label> 
     </td> 
     <td> 
      <asp:TextBox ID="TextBox_1" runat="server" ReadOnly="True" ></asp:TextBox>   
     </td> 
    </tr> 

... 

これは正常です。しかし、エラーメッセージが表示されなくても、最初のテーブル行はその領域を保持しています。これにより、ページが読み込まれるときに不必要なスペースが存在するため、UI上のUIの表示が悪くなります。

ページがロードされているときと検証エラーがないときに、最初の行(検証のエラーメッセージ行)のスペースを非表示にするにはどうすればよいですか?あなたのバリデータに

Display="Dynamic" 

プロパティを設定する必要が

答えて

2

これを解決する良い方法が見つかりました。

パネルに検証を入れて、「なし」と表示させます。

<asp:Panel ID="Panel1" runat="server" > 
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
      ErrorMessage="RequiredFieldValidator1" ControlToValidate="TextBox1" Display="None"></asp:RequiredFieldValidator><br /> 
     <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
      ErrorMessage="RequiredFieldValidator2" ControlToValidate="TextBox2" Display="None"></asp:RequiredFieldValidator><br /> 
</asp:Panel> 

そして、あなたのASPページの先頭に、検証サマリーを追加してください。

<table> 
     <tr> 
     <td> <asp:ValidationSummary id="summery1" runat="server"/></td> 
     </tr> 
    .... 

検証要約は、ページに必要なスペースのみを取得します。バリデータを非表示にする

43

、これは望ましい行動を引き起こします。

+1

これでも空の行がレンダリングされるため、問題が完全に解決されない場合があります。 – Filburt

+0

私はそれを持っているので、tr要素を完全に隠したいと思うので、JSスクリプトを使ってカスタムを作らなければならないと思います。たとえば、検証メッセージにonchangeイベントを追加すると、それはcssが変更され、最初のtrに対してcssが変更されて表示されます。 –

+0

[検証に基づくコントロールのスタイルを変更する(ASP.NET)](http://stackoverflow.com/a/1405177/205233)には解決策があるかもしれません。 – Filburt

-1

この

<tr> 
    <td>TEXT</td> 
</tr> 
<tr> 
    <td>INPUT 
    <br/> 
    <asp:validator....></> 
    </td> 
</tr> 

OR

<tr> 
    <td>TEXT</td> 
</tr> 
<tr> 
    <td>INPUT 
    <div> 
     <asp:validator....></> 
    </div> 
    </td> 
</tr> 
0

シンプルなソリューションを行います。バリにこれを追加します。

CssClass="AT3RValidator" 

.AT3RValidator { 
    display:none; 
} 

そして=「ダイナミック」を表示するように設定され、それが視界に設定するのでそれはまだ空きスペースをレンダリングします:生成されたバリデータの表示と異なるスパンに隠されたスタイルを:なし、それがレンダリング望ましくない空きスペース。

+0

Validation Error *が表示されるはずです。これは、それが表示されるべきかどうかにかかわらず、それを隠すように見えます。 – TylerH

+0

エラーが発生するとインラインスタイルの表示が直接要素に設定され、クラスが上書きされます。 display = "Dynamic"はdisplay:noneを設定しているので、私のクラスは本当に必要ではありません。 –

1

プロパティを追加するだけです。

表示= "ダイナミック"

あなたのバリデータ、例内の以下与えます。

<asp:RequiredFieldValidator ID="rfvEmail" runat="server" Display="Dynamic" ForeColor="Red" ErrorMessage="Please enter Email" ControlToValidate="txtEmail" ValidationGroup="addManufacture"></asp:RequiredFieldValidator> 
+1

これは[#1回答](http://stackoverflow.com/a/10563265/2415524)の複製です。 – mbomb007

+0

なぜ投票数の多い回答がページのボットに残り、最初に表示されないのか。 –

関連する問題