web analytics

How to stop the unnecessary white space rendered when the ASP.NET validation control is not fired yet?

Options

codeling 1524 - 6369
@2021-01-01 12:28:49

If you are using ASP.NET required field validation controls to validate some text boxes in your ASP.NET page as below:

<tr>
    <td width="40%" class=postheader><%# GetText("username") %>:<font color="red">*</font></td>
    <td class=post_alt>
        <asp:TextBox id=UserName runat="server" Width="100%" />
        <asp:RequiredFieldValidator runat="server" ErrorMessage='User Name is required.' ControlToValidate="UserName" EnableClientScript="False"/>
    </td>
</tr>
<tr>
    <td class=postheader><%# GetText("password") %>:<font color="red">*</font></td>
    <td class=post_alt>
        <asp:TextBox id=Password runat="server" TextMode="Password" Width="100%" />
        <asp:RequiredFieldValidator runat="server" ErrorMessage='Password is required.' ControlToValidate="Password" EnableClientScript="False"/>
    </td>
</tr>
<tr>
    <td class=postheader><%# GetText("retype_password") %>:<font color="red">*</font></td>
    <td class=post_alt>
        <asp:TextBox id=Password2 runat="server" TextMode="Password" Width="100%" />
        <asp:CompareValidator runat="server" ErrorMessage='Passwords didn't match.' ControlToValidate="Password2" ControlToCompare="Password" EnableClientScript="False"/>
    </td>
</tr>
<tr>
    <td class=postheader><%# GetText("email") %>:<font color="red">*</font></td>
    <td class=post_alt>
        <asp:TextBox id=Email runat="server" Width="100%"/>
        <asp:RequiredFieldValidator runat="server" ErrorMessage='Email Address is required.' ControlToValidate="Email" EnableClientScript="False"/>
    </td>
</tr>

You may notice that there is an unnecessary space shown below the text filed:

How to stop the unnecessary spaces rendered while the page is loading and when there is no validation error?

@2021-01-01 12:43:11

To stop the unnecessary spaces rendered while the page is loading and when there is no validation error, you need set the value of the Display property to Dynamic:

<tr>
    <td width="40%" class=postheader><%# GetText("username") %>:<font color="red">*</font></td>
    <td class=post_alt>
        <asp:TextBox id=UserName runat="server" Width="100%" />
        <asp:RequiredFieldValidator runat="server" Display="Dynamic" ErrorMessage='User Name is required.' ControlToValidate="UserName" EnableClientScript="False"/>
    </td>
</tr>
<tr>
    <td class=postheader><%# GetText("password") %>:<font color="red">*</font></td>
    <td class=post_alt>
        <asp:TextBox id=Password runat="server" TextMode="Password" Width="100%" />
        <asp:RequiredFieldValidator runat="server" Display="Dynamic" ErrorMessage='Password is required.' ControlToValidate="Password" EnableClientScript="False"/>
    </td>
</tr>
<tr>
    <td class=postheader><%# GetText("retype_password") %>:<font color="red">*</font></td>
    <td class=post_alt>
        <asp:TextBox id=Password2 runat="server" TextMode="Password" Width="100%" />
        <asp:CompareValidator runat="server" Display="Dynamic" ErrorMessage='Passwords didn't match.' ControlToValidate="Password2" ControlToCompare="Password" EnableClientScript="False"/>
    </td>
</tr>
<tr>
    <td class=postheader><%# GetText("email") %>:<font color="red">*</font></td>
    <td class=post_alt>
        <asp:TextBox id=Email runat="server" Width="100%"/>
        <asp:RequiredFieldValidator runat="server" Display="Dynamic" ErrorMessage='Email Address is required.' ControlToValidate="Email" EnableClientScript="False"/>
    </td>
</tr>

The default value is "static" which reserves the space and causes the white space rendered. 

If you don't type some value in the required text boxes when you click the submit button, the validation error message will be displayed below the text boxes:

 

Comments

You must Sign In to comment on this topic.


© 2021 Digcode.com