Tutorial :ASP.NET: CompareValidator and ValidationSummary



Question:

I got some odd behaviour with a CompareValidator and a ValidationSummary.

For instance the below .aspx file (there is no relevant C# codebehind, so just past the below code in the a new .aspx file, run and watch the behaviour).

And these (refined) steps:

  1. Press F5 to start the app;
  2. Click the button;
  3. Left mouse click in the left text box;
  4. Type foo;
  5. Left mouse click in the right text box;
  6. Type bar;
  7. Click the button (now the summary is not right);
  8. Click the button again (now the summary is right, but you do NOT get a post back as not all of the validation requirements are yet met).

These steps have a tiny bit different result, because the focus change is by keyboard:

  1. Press F5 to start the app;
  2. Click the button;
  3. Left mouse click in the left text box to focus it;
  4. Type foo;
  5. Press the Tab key to move to the focus to the right text box;
  6. Type bar;
  7. Press the Tab key to move to the focus to the button (now the summary is not right);
  8. Click the button (now the summary is right, but you do NOT get a post back as not all of the validation requirements are yet met).

Why do you need two actions to the Submit button (one action to get it focussed, one to click it) to get the ValidationSummarry updated?

(Old steps for comparison: 1. Enter nothing in both textboxes, then press the SubmitButton 2. Now you get a bulleted list in the validation summary, and two validation lines in front of the SubmitButton 3. Now enter "foo" in TextBox1 and "bar" in TextBox2, then press the SubmitButton 4. Now you keep the two items in the bulleted list, and "Both textbox values should be same." in front of the SubmitButton 5. Now press the SubmitButton again 6. Now the ValidationSummary correctly contains "Both textbox values are not equal." Ad 4: why doesn't the ValidationSummary contain only one bullet "Both textbox values should be same."? )

    <asp:ValidationSummary ID="ValidationSummary" runat="Server" ShowSummary="true" DisplayMode="BulletList" />      <asp:Label ID="lbl" AssociatedControlID="TextBox1" runat="Server" Text="Write into TextBox" />      <asp:TextBox ID="TextBox1" runat="Server" />      <asp:TextBox ID="TextBox2" runat="Server" />      <asp:RequiredFieldValidator ID="req1" runat="Server" ControlToValidate="TextBox1"          ErrorMessage="1st TextBox is Mandatory field" Text="<br>Please write something in 1st  Box." />      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="Server" ControlToValidate="TextBox2"          ErrorMessage="2nd TextBox is Mandatory field" Text="<br>Please write something in 2nd Box." />      <asp:CompareValidator ID="CompareValidator1" runat="Server" ControlToValidate="TextBox2"          ControlToCompare="TextBox1" Operator="Equal" Type="string" Text="Both textbox values should be same."          ErrorMessage="Both textbox values are not equal." Display="Dynamic" />      <asp:Button ID="SubmitButton" runat="Server" Text="Submit" />  

Note: Adding a ValidationGroup does not help:

        <asp:ValidationSummary ID="ValidationSummary" runat="Server" ValidationGroup="All" ShowSummary="true" DisplayMode="BulletList" />          <asp:Label ID="lbl" AssociatedControlID="TextBox1" runat="Server" Text="Write into TextBox" />          <asp:TextBox ID="TextBox1" runat="Server" />          <asp:TextBox ID="TextBox2" runat="Server" />          <asp:RequiredFieldValidator ID="req1" runat="Server" ValidationGroup="All" ControlToValidate="TextBox1"              ErrorMessage="1st TextBox is Mandatory field" Text="<br>Please write something in 1st  Box." />          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="Server" ValidationGroup="All" ControlToValidate="TextBox2"              ErrorMessage="2nd TextBox is Mandatory field" Text="<br>Please write something in 2nd Box." />          <asp:CompareValidator ID="CompareValidator1" runat="Server" ValidationGroup="All" ControlToValidate="TextBox2"              ControlToCompare="TextBox1" Operator="Equal" Type="string" Text="Both textbox values should be same."              ErrorMessage="Both textbox values are not equal." Display="Dynamic" />          <asp:Button ID="SubmitButton" runat="Server" Text="Submit" ValidationGroup="All" />  

Anyone?


Solution:1

The only way I have been able to recreate is to not press the Submit button in step #3. That leaves you with "incorrect" text in the ValidationSummary, as it is only updated when a submit occurs - it is not updated in real time by Javascript.

Are you sure you are pressing the Submit button at the end of step #3 (i.e. a post back occurs)?


Solution:2

There are two issues at hand here:

  1. Displaying the Text property of each invalid Validator controls
  2. Filling the ValidationSummary with a list of ErrorMessage properties of the invalid Validators

    1. Is being done when a field being validated looses focus.

    2. Is being done when the form actually tries to submit itself.

In this particular form, the asp:Button was at the end of the line (thanks for Jason Berkan noticing this; I wish I could give him reputation points for that!).

Now, when you start pressing that Button, the TextBox looses focus, thereby:

  1. Displaying the Text property of the accompanying Validator
  2. Moving the Button to the right
  3. The button not becoming "pressed", but merely getting the focus

Since the button now did not get properly clicked (the press started, but never ended!), it cannot submit the form, therefore the ValidationSummary is not filled.

The solution is simple: make sure that your form submitting controls never can move when they are clicked.

You can for instance to this by:

  • Putting a <br /> tag in front of them
  • Putting them in a separate <tr>


Solution:3

Try adding ValidationGroup to all validation control. It should solve the issue.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »