Search code examples
htmlcssasp.netasp.net-validators

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

First, take a look at the thing we can see

Error messages

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="[email protected]" 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.

Solution

  • 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.