How to avoid space occupied by an inactive validation control in ASP.NET

By | August 6, 2013

A validation control occupies space even if it is not showing any error. This is because by default Display property of the validation control is set to Static. For example, if we take two validation controls, one RequiredFieldValidator and one RangeValidator and if any of the validation fails, both the validation controls will consume their spaces as in the following figure
RangeValidator control example - Mozilla Firefox_2013-08-06_01-03-19
To avoid the spaces occupied by the validation controls, we just need to set Display property to Dynamic i.e., Display=”Dynamic”

Validation controls displays errors in a Span tag when rendered in the browser. Style of the Span tag of an inactive validation control is set to visibility:hidden by default when the Display property of the validation control is Static or it’s not set. Span is rendered as following that causes the space for an inactive validation control:

[code language=”html”]
<span style="color:Red;visibility:hidden;" id="Span1">(Required)</span>
[/code]

But when we set the Display property of the validation control to Dynamic, an inactive validation control renders Span tag with its style set to display:none. Here, Span is rendered with display:none style and space is not occupied by the inactive validation control:

[code language=”html”]
<span id="Span2" style="color:Red;display:none;">(Required)</span>
[/code]

After setting this Display property to Dynamic, space is only occupied by an active validation controls. Now, validation errors will look like following
RangeValidator control example - Mozilla Firefox_2013-08-06_01-32-47
HTML Source

[code language=”html”]
<div>
<div>
<asp:Label
ID="lblAge"
runat="server"
Text="Age"
AssociatedControlID="txtAge">
</asp:Label>
</div>
<div style="clear:both;"></div>
<div>
<asp:TextBox
ID="txtAge"
runat="server"
CssClass="textbox">
</asp:TextBox>

<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="txtAge"
ErrorMessage="(Required)"
ForeColor="Red"
Display="Dynamic">
</asp:RequiredFieldValidator>

<asp:RangeValidator
ID="RangeValidator1"
runat="server"
ControlToValidate="txtAge"
Type="Integer"
MinimumValue="18"
MaximumValue="30"
ErrorMessage="(Age should be between 18 and 30)"
ForeColor="Red"
Display="Dynamic">
</asp:RangeValidator>
</div>
<div style="clear:both;"></div>
<div>
<asp:Label
ID="lblDOB"
runat="server"
Text="Date of Birth"
AssociatedControlID="txtDOB">
</asp:Label>
</div>
<div style="clear:both;"></div>
<div>
<asp:TextBox
ID="txtDOB"
runat="server"
CssClass="textbox"
Text="MM/DD/YYYY">
</asp:TextBox>

<asp:RequiredFieldValidator
ID="RequiredFieldValidator2"
runat="server"
ControlToValidate="txtDOB"
ErrorMessage="(Required)"
ForeColor="Red"
Display="Dynamic">
</asp:RequiredFieldValidator>

<asp:RangeValidator
ID="RangeValidator2"
runat="server"
ControlToValidate="txtDOB"
Type="Date"
MinimumValue="01/31/1985"
MaximumValue="01/31/2013"
ErrorMessage="(Invalid Date)"
ForeColor="Red"
Display="Dynamic">
</asp:RangeValidator>
</div>
<div style="clear:both;"></div>
<div>
<asp:Button
ID="btnSubmit"
runat="server"
Text="Submit"
CssClass="button"
onclick="btnSubmit_Click" />
</div>
</div>
[/code]

0 thoughts on “How to avoid space occupied by an inactive validation control in ASP.NET

Leave a Reply

Your email address will not be published. Required fields are marked *