如何确保验证器错误消息显示在右侧？

Question

先来看看我们能看到的东西

如您所见，在 From 我们有一个无效的电子邮件地址，而在 To 我们没有电子邮件地址。这两个字段都有一个 RequiredFieldValidator 和另一个验证器。在 From 的情况下，另一个验证器是 RegularExpressionValidator。由于 To 有一个电子邮件地址，因此显示其正确的电子邮件地址 Invalid 并且由于它不为空，Required 不显示。我的目标是在最右角显示错误，而不管它是 RequiredFieldValidator 还是 RegularExpressionValidator，也不管标签在其兄弟标签中的相对结构位置。为了简单起见，我粘贴了 From:

的结构

        <div class="ui-field">
            <label class="ui-label" for="<%= From.ClientID %>">From</label>
            <span class="ui-field-req">&nbsp;*</span>
            <asp:RequiredFieldValidator ID="FromValidator" runat="server" ControlToValidate="From" CssClass="ui-field-error" ErrorMessage="Required" ForeColor="Red"></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="FromEmailValidator" runat="server" CssClass="ui-field-error" ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ControlToValidate="From" ErrorMessage="Invalid" ForeColor="Red"></asp:RegularExpressionValidator>
            <asp:TextBox ID="From" runat="server" CssClass="ui-input"></asp:TextBox>
        </div>

这是CSS我为页面写的相关部分：

    .ui-form .ui-field-error {
        float: right;
    }

这就是我们为 From 生成的 HTML:

<div class="ui-field">
                <label class="ui-label" for="ctl00_PageBody_From">From</label>
                <span class="ui-field-req">&nbsp;*</span>
                <span id="ctl00_PageBody_FromValidator" class="ui-field-error" style="color:Red;visibility:hidden;">Required</span>
                <span id="ctl00_PageBody_FromEmailValidator" class="ui-field-error" style="color: red; visibility: visible;">Invalid</span>
                <input name="ctl00$PageBody$From" type="text" value="rocli@cablevision.com" id="ctl00_PageBody_From" class="ui-input">
            </div>

最后的细节：如果我删除 RequiredFieldValidator 的 Required 的内部文本，那么 Invalid 将跳转到正确的位置。有没有办法用普通 CSS 或 ASP.NET 中的 properties/attributes 来解决这个问题？如果不是，那么解决方案将涉及 Javascript DOM 我想避免的观察者。

Answer 1

这可以通过指定验证器的 Display 属性来控制。由于你不希望白色space在没有相应错误信息的情况下被占用，所以你需要将你的Display属性设置为Dynamic。

<asp:RequiredFieldValidator ID="FromValidator" runat="server" ControlToValidate="From" 
    CssClass="ui-field-error" ErrorMessage="Required" ForeColor="Red" Display="Dynamic"/>

当你不设置这个属性时，默认值Static被认为是space被相当于你在[上的消息长度的控件占用=15=] 属性该控件。

Dynamic 确保仅当该控件的验证失败时才使用页面上错误消息的 space。

此 MSDN article 描述了有关此属性的更多信息。

如何确保验证器错误消息显示在右侧？

How to make sure validator error messages are displayed to the right?

html

css

asp.net

asp.net-validators