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

Question

First, take a look at the thing we can see

As you can see, at the From we have an invalid email address, while at the To we have no email address. Both fields have a RequiredFieldValidator and another validator. In the case of the From, the other validator is a RegularExpressionValidator. Since the To has an email address, its correct email address of Invalid is displayed and since it is not empty, Required is not displayed. My aim is to display the error at the rightmost corner, regardless of whether it is a RequiredFieldValidator or a RegularExpressionValidator and regardless of the relative structural position of the tag among its siblings. To keep things simple, I paste the structure I have for the 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>

This is the relevant part of CSS I have written for the page:

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

And this is what we have generated for the From as 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>

Final detail: If I remove the inner text of Required of the RequiredFieldValidator, then Invalid will jump to the right place. Is there a way either in plain CSS or some properties/attributes in ASP.NET to resolve this? If not, then the solution will involve Javascript DOM watchers which I would like to avoid.

@techspider, thanks, I am testing it right now. Can you explain why should this solve the problem? — Lajos Arpad, Sep 02 '16 at 16:09
`Display` property controls the space on the page for the `ErrorMessage` of your validation control. Since you didn't mention it, the default values adds space to the message length equivalent to it. Adding `Dynamic` will only add space dynamically when it requires — techspider, Sep 02 '16 at 16:11
@techspider, when you say "when it requires", do you mean the case when the error message is shown? — Lajos Arpad, Sep 02 '16 at 16:12
@techspider, test is successful, thanks! If you convert the ideas described here into an answer, I will accept it. — Lajos Arpad, Sep 02 '16 at 16:12

score 1 · Accepted Answer · edited Sep 02 '16 at 16:22

This can be controlled by specifying Display property of your validator. Since you do not want white space to occupy when there is no corresponding error message, you need to set your Display property to Dynamic.

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

When you do not set this property, the default value of Static is considered and space is occupied by the control equivalent to the length of the message you have on ErrorMessage property of that control.

Dynamic ensures that space for error message on the page is utilized only when validation fails for that control.

This MSDN article describes more about this property.

Very nice. My problem was that by not specifying this value I was using the default value as Static. — Lajos Arpad, Sep 02 '16 at 16:23

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

1 Answers1