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

我想使用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在页面上看起来不好，因为页面加载时存在不必要的空间

加载页面时，如果没有验证错误，如何隐藏第一行（验证的错误消息行）的空格？

您需要设置

Display="Dynamic"

---

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

我找到了解决此问题的好方法

将验证放在面板中，并将其显示为“无”

并在ASP页面顶部添加验证摘要

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

....

---

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

要隐藏验证器，请执行以下操作

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

正文
输入

或

正文
输入

简单的解决方案。将此添加到验证程序：

CssClass="AT3RValidator"

.AT3RValidator {
    display:none;
}

display="dynamic"

并设置为display=“Dynamic”，但仍然会呈现空白，因为它将可见性：隐藏样式设置为生成的验证程序范围，这与display:none不同，它呈现不需要的空白。

只需添加属性即可

Display=“动态”

在您的验证器中，下面给出一个示例

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

---

在字段验证程序中添加以下属性：

CssClass="AT3RValidator"

.AT3RValidator {
    display:none;
}

display="dynamic"

---

这仍然会呈现一个空行，所以它可能无法完全解决问题。我知道了，所以你想完全隐藏tr元素，认为你必须使用JS脚本来定制。例如，将onchange事件添加到验证消息中，一旦它更改了css并显示出来，请更改第一个tr的css并使其可见。可能有一个解决方案。@devan我担心这需要相当多的客户端javascript魔法，而我在这方面的经验相当薄弱。在任何情况下都需要设置

Display=“Dynamic”

，以使其正常工作。这是一个重复的问题。为什么投票数较高的答案会保留在页面的bot中，而不会首先显示。那么，当出现验证错误时会发生什么？无论是否应该显示，它都将隐藏它。当错误触发时，显示内联样式将直接设置为元素，因此它将重写我的类。但实际上并不需要我的类，因为display=“Dynamic”已设置display:none。