Issue when setting Display ="Dynamic" for Required Field Validator.

Question

0.00/5 (No votes)

See more:

XML

Here is my ASP.NET code. Simple. it has a A textbox associated with a required field validator and a submit button.

 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ControlToValidate="TextBox1" Display="Dynamic"
            ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
        <asp:Button ID="Button1" runat="server"  Text="Click Me" />

Do the following

1. Click on Button1

2. RequiredFieldValidator will be shown

3. Type some text in TextBox

4. Use your Mouse(no tab please). and click on the button , you can see that your page does not "POSTBACK" and only the validation gets cleared. you need to

click again the button for Submission of Form.

This seems to be  a bug by Microsoft when setting the property Display ="Dynmaic" and Is there a easy workaround without changing the intended behavior for this available? I couldn't find a solution for this anywhere.

Posted 12-Aug-10 4:55am

Sivastyle

Updated 25-Dec-17 22:07pm

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Al-Farooque Shubho · Answer 1 · 2010-08-12T06:00:00

Very nice question.

I wouldn't call it a bug. We need to understand what really is happening under the hood.

When you set Display="Dynamic" , the Validator controls style property is actually set as "display:none" and hence, it does not retain any space when the validator is now shown.

If you use firebug, you will see that, the Validator control will render the following HTML:

<span style="color: Red; display: none;" id="RequiredFieldValidator1">RequiredFieldValidator</span>

And, when you set Display="Static", the Validator control's style property is actually set as "visibility:hidden", which actually retains space in the UI when the validator is not shown.

If you use firebug, you will see that, the Validator control will now render the following HTML:

<span style="color: Red; visibility: hidden;" id="RequiredFieldValidator1">RequiredFieldValidator</span>

Now, let me explain what happens when the Display="Dynamic" is set.

--You browse the page and click the button without placing any text in the text box. The validation error message is being shown.

--You put some text in the text box and tries to click the button. This results in the "onmouseout" javascript event firing on the text box control (Before firing the "onclick" event on the button), which results in the validator to validate the text box again, no error is found and the validator control's style property is set to "display:none".

--This causes the validator control's corresponding HTML element (span) to give up it's space in the UI and hence the whole UI is repainted in the browser. So, the button finds it's new place and occupies the space that was retained by the validator control's space (span).

--The while UI is repainted before your click event is executed on the button. So, in reality, your click event on the browser is not executed at all. So, nothing happens and you need to click again on the button.

To verify the above explanation, you can do a quick test as follows:

--Refresh the browser again.
--Click the button without placing any text in the text box. The validation error message will be shown.
--Write some text in the text box and click on any where on the browser (not on the button).
--This will cause the "onmouseout" event of the text box, validator will be fired, the error message will be gone, and the button will replace the validation message's place. Same result.

So, its not actually a bug. Rather, its just that we have to understand what happens under the hood when we are setting Display="Dynamic" and this we need to adjust our codes/implementation accordingly.

Hope, this will help.

Sivastyle · Answer 2 · 2010-08-12T20:28:00

Hi Al-Farooque Shubho,

Thanks for the detailed information. I knew why it was happening, But i thaought of claiming it as a bug because we expect this property to work same as Display ="Static" but will not occupy the space, as that is what the purpose of Dynamic display.

However You pointed me right by mentioning UI is repainted before the click event is executed(earlier, I thought some client script might help) on the button is the cause for the issue.

Anyway it looks like I cannot workaround this by writing any clientscript and changing implementation in my project might be risky for me. All these days I never tried to write such validation and usually use a * or summary validation. Now I need to consider a lot of UI facts and need to fix this.!!!

turbochris · Answer 3 · 2010-12-09T20:38:00

Solution 3

Hi there. To get around this, I would wrap the validator in a

<br />
<span class="xxxx"><br />
Validator here<br />
</span><br />

You can then set the class xxxx to display:block.

Posted 9-Dec-10 20:38pm

turbochris

Updated 9-Dec-10 20:40pm

v4

Issue when setting Display ="Dynamic" for Required Field Validator.

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0