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

Original Post: http://deepak-sharma.net/2013/08/06/how-to-avoid-space-occupied-by-an-inactive-validation-control-in-asp-net/

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”

ADVERTISEMENT

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:

1
<span style="color:Red;visibility:hidden;" id="Span1">(Required)</span>

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:

1
<span id="Span2" style="color:Red;display:none;">(Required)</span>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<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>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s