在ASP页面中未触发验证错误消息时隐藏不必要的空间

时间:2012-05-12 10:34:00

标签: html css asp.net requiredfieldvalidator

我想使用ASP必需的字段验证来验证ASP.NET页面中的一些文本框。我想在页面顶部显示该错误消息。

<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在页面上看起来很糟糕,因为页面加载时会有不必要的空间。

如何在页面加载时以及没有验证错误时隐藏第一行的空间(验证的错误消息行)?

6 个答案:

答案 0 :(得分:48)

您需要设置

Display="Dynamic"
验证者的

属性,这将导致理想的行为。

答案 1 :(得分:3)

在字段验证器中添加以下属性:

display="dynamic"

答案 2 :(得分: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>
    ....

验证摘要仅在页面中获取所需空间。

答案 3 :(得分:1)

只需添加属性。

  

显示=&#34;动态&#34;

验证器中的

,示例在下面给出。

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

答案 4 :(得分:0)

简单的解决方案。将此添加到验证器:

CssClass="AT3RValidator"

.AT3RValidator {
    display:none;
}

并设置为display =“Dynamic”,但仍会呈现空白区域,因为这会设置可见性:隐藏样式以生成验证器范围,这与display:none不同,它会呈现不需要的空白区域。

答案 5 :(得分:-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>