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

Question

首先，看看我们能看到的东西

正如您所看到的，在发件人，我们的电子邮件地址无效，而在收件人，我们没有电子邮件地址。两个字段都有RequiredFieldValidator和另一个验证器。对于发件人，另一个验证器是RegularExpressionValidator。由于收件人有电子邮件地址，因此会显示无效的正确电子邮件地址，并且由于它不为空，因此不会显示必需。我的目标是在最右边显示错误，无论它是RequiredFieldValidator还是RegularExpressionValidator，而不管标签在其兄弟姐妹中的相对结构位置如何。为了简单起见，我将结构粘贴到发件人：

        <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的必需的内部文本，则无效将跳转到正确的位置。有没有办法在纯CSS或ASP.NET中的一些属性/属性来解决这个问题？如果没有，那么解决方案将涉及我想避免的Javascript DOM观察者。

Answer 1

可以通过指定验证器的Display属性来控制。由于在没有相应的错误消息时您不希望占用空格，因此您需要将Display属性设置为Dynamic。

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

如果不设置此属性，则会考虑默认值Static，并且控件占用的空间等于该控件的ErrorMessage属性上的消息长度。< / p>

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

此MSDN article详细介绍了此属性。