Hide unnecessary space when validation error messages are not firing in ASP page

Question

I want to validate some text boxes in my ASP.NET page using ASP required field validation. And I want to display that error message in top of the page.

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

...

This is working fine. However, the first table row is keeping its space even error messages are not displaying on it. This will cause the UI to look bad on the page since unnecessary space is there when the page loads.

How can I hide the space of the first row (validation's error messages row) while the page is loading and when there is no validation error?

Cymophane

Answer 1

I found a good way to resolve this.

Put your validation inside a panel, and make them display as "none".

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

And top of your ASP page Add a Validation Summary.

<table>
        <tr>
        <td> <asp:ValidationSummary id="summery1" runat="server"/></td>
        </tr>
    ....

Validation summary only gets required space in Page.

Cymophane

Answer 2

You need to set

Display="Dynamic"

property to your validator, this will cause desirable behaviour.

Landa

This will still render an empty row, so it may not fully solve the problem. – Every

I got it, so you want to completely hide tr element, think that you have to use JS script to make custom. For example add onchange event to validation message, once it has changed css and is displayed change css for first tr and make it visible too. – Landa

Changing a control's style based on validation (ASP.NET) may have a solution. – Every

@Cymophane I'm afraid this requires quite some client side javascript magic and my experience on that is rather weak. Setting Display="Dynamic" is need to get it to work in any case. – Every

Answer 3

Add the below property in field validator:

display="dynamic"

Music

Answer 4

Just add Property.

Display="Dynamic"

within your Validator, Example give below.

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

Hexapod

This is a duplicate of the #1 answer. – Needlecraft

Kind'a akward why answers with higher vote count remain in bot of page and aren't diplayed first. – Landa

Answer 5

Simple solution. Add this to validator:

CssClass="AT3RValidator"

.AT3RValidator {
    display:none;
}

And set to display="Dynamic", but that will still render empty space because that sets visibility:hidden style to generated validator span, which is different from display:none, it renders undesired empty space.

Prosperity

What will happen when the Validation Error should appear, then? This looks like it will hide it regardless of whether it should be showing or not. – Codon

when error fires display inline style gets set to element directly, so it overrides my class. but my class is not really needed because display="Dynamic" sets display:none already. – Picturize

Answer 6

To hide validators do this

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

OR

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

Isomerism