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

Posted 2023-03-05

【中文标题】当验证错误消息未在 ASP 页中触发时隐藏不必要的空间

【英文标题】：Hide unnecessary space when validation error messages are not firing in ASP page

【发布时间】：2012-05-20 17:36:57

【问题描述】：

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

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

【参考方案1】：

你需要设置

Display="Dynamic"

您的验证器的属性，这将导致理想的行为。

【讨论】：

这仍然会呈现一个空行，因此它可能无法完全解决问题。

我知道了，所以你想完全隐藏tr元素，认为你必须使用JS脚本来定制。例如，将 onchange 事件添加到验证消息中，一旦它更改了 css 并显示为第一个 tr 更改 css 并使其也可见。

Changing a control's style based on validation (ASP.NET) 可能有解决办法。

@devan 恐怕这需要相当多的客户端 javascript 魔法，而我在这方面的经验相当薄弱。在任何情况下都需要设置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>
    ....

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

【参考方案3】：

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

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

或

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

【参考方案4】：

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

CssClass="AT3RValidator"

.AT3RValidator 
    display:none;

并设置为 display="Dynamic"，但这仍然会渲染空白空间，因为这会将可见性：隐藏样式设置为生成的验证器跨度，这与 display:none 不同，它会渲染不需要的空白空间。

【讨论】：

那么当验证错误应该出现时会发生什么？看起来它会隐藏它，不管它是否应该显示。

当错误触发时显示内联样式直接设置为元素，因此它会覆盖我的类。但我的课并不是真正需要的，因为 display="Dynamic" 已经设置了 display:none。

【参考方案5】：

只需添加属性。

显示="动态"

在您的验证器中，示例如下。

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

【讨论】：

这是#1 answer的副本。

有点尴尬，为什么投票数较高的答案保留在页面机器人中并且没有首先显示。

【参考方案6】：

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

display="dynamic"