Is there a way to get a ValidationSummary to work with client-side validators?

Question

The .NET ValidationSummary control aggregates error messages from validators that are fired on postback. Is there some way of getting it to also show error messages from client-side validators?

The problem I am working on is that on a long page, it is possible to click a submit button, have some client-side validators fail, but never see the error message. I would like to have a validation summary near the button so that the user is never left without feedback.

I would like any standard .NET validators that have client-side validation to be reflected in the validation summary, but I am most concerned with getting the RequiredFieldValidators to work.

I could hack it so that on clicking the button would automatically, after a short delay, display a general message telling the user to check for errors on the page. This would work for when no postback has occurred, but it would be ugly.

Here is some example code that is not working for me:

<asp:LinkButton ID="btnOpen" runat="server" ToolTip="Open" ValidationGroup="Create" CausesValidation="true" />
<asp:TextBox ID="txtBlah" runat="server" />
<asp:RequiredFieldValidator ID="reqBlah" runat="server" ControlToValidate="txtBlah" EnableClientScript="true" Display="Dynamic" ErrorMessage="Enter some blah" ValidationGroup="Create" />
<asp:ValidationSummary ID="summary" runat="server" EnableClientScript="true" DisplayMode="BulletList" HeaderText="Errors:" ShowMessageBox="true" ShowSummary="true" ValidationGroup="Create" />

The validator shows the error without a postback, but the summary does not.

As has been suggested in the comments, there is probably something else on the page that stops my example code from working. I'm not able to try to reproduce the exact cause right now, though the page is pretty heavy and has some UpdatePanels on there, so I'll just stick with my hack until there is more time to work on it.

Thanks for the attempts to help. I recommend people not to work on this question any more, as I don't think I've provided enough info to really help anyone solve the issue.

Answer 1

It would be easier to give a more detailed answer if you indicated which client-side validator you're using. However, in general it is not that difficult; most client-side validators allow you to specify where the validation messages should show up, and you could just point them to the same HTML element as where you keep your ValidationSummary control

Answer 2

in your "submit" button, set "CausesValidation=true". This will force the client to enter valid data. If your validation controls are not showing up, its more likely that you have not bound them to a specific control (I guess ??).Have you set the "ControltoValidate" property for your required field validator to point to the textbox/field you want to validate ?

Answer 3

I have decided to implement a bit of a hack instead, which is to use JQuery to set up a click handler which detects if there are any errors on the page, and just displays a general message telling the user to find and fix the errors. It's not good, but it will do for now.

Answer 4

I believe you have to actually enter values in the "Text" property of your validator in order to display a message in the validation summary. The "Error Message" is the text that is displayed on the page where the validator is located, but the "Text" property is the text that is displayed in the Validation Summary control.

Answer 5

David, you are not alone :-(

I have this very simple page with three RequiredFieldValidators where the summary does not get updated until the page has made a roundtrip to the server.

So if you receive a solution, I would very much like to hear it!

At the moment I am thinking of the rediculous solution: making two required field validators per textbox. One giving the message "*" to the right of the textbox and the other placed where I want my summarybox, giving the message I want.

But a nicer solution (including ValidationSummary) would be nice!

Answer 6

I have the same problem with validation. I va a CreateUserWizzard which shows the * fine next to the textbox but nothing in the ValidationSummary. Its very strange since the validation works.

If anyone has a solution for this please post it here... Been looking and loooooooking ..

Answer 7

I too have had this problem. After spending way too much time dissecting the MS client side validation API ;), I traced the problem to a weird issue with DOM parsing, below I explain why this happens in some cases and the solution I used to fix it.

[Why does it happen?]

Each validator control is rendered as a span with non-standard attributes that are used to perform the client side validation. For example the evaluationfunction attribute below:

<span id="...id" controltovalidate="...BillingName" errormessage="blah" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" display="Dynamic" initialvalue="" >*</span>

These attributes are parsed by the framework in the API like this below (notice the eval):

for (i = 0; i < Page_Validators.length; i++) {
  val = Page_Validators[i];
  if (typeof(val.evaluationfunction) == "string") {
     eval("val.evaluationfunction = " + val.evaluationfunction + ";");
     } 
}

the problem is that the special attributes i.e. evaluationfunction we're always returning undefined so the string was never converted to a proper validator object. This to me is still a mystery because from what I can tell it's appears to be totally random.

What happens is when the Page_ClientValidate is kicked off, it tries to invoke each validators validate function but it can't because evaluationfunction == undefined. Instead of using false as the default it assumes true and so no validation actually happens and everything appears valid from the client side. the if (typeof(val.evaluationfunction) == "function") is never true so it falls back on the prior assignment of val.isvalid = true;.

function ValidatorValidate(val, validationGroup, event) {
 val.isvalid = true;
 if ((typeof(val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, validationGroup)) 
 {
  if (typeof(val.evaluationfunction) == "function") 
  {
   val.isvalid = val.evaluationfunction(val);
   if (!val.isvalid && Page_InvalidControlToBeFocused == null && typeof(val.focusOnError) == "string" && val.focusOnError == "t") 
   {
    ValidatorSetFocus(val, event);
   }
  }
 }
  ValidatorUpdateDisplay(val);
} 

[How did I fix it?]

To fix this I wrote a routine that can be called after the DOM has finished loading. This routine loops all of the validator controls and tries to create the object properties from the raw markup data in the SPAN using JQuery, although you could probably use any other equivalent tool to get the same result. This routine does not fix all of the validator controls, mainly required field validators and regular expression validators. You'll need to change it if your using other validation controls that have additional properties.

function fixValidatorProperties()
{
    if (Page_Validators && Page_Validators[0] && Page_Validators[0].evaluationfunction == undefined)
    {
        var val = null;
        for (i = 0; i < Page_Validators.length; i++) 
        {
            val = Page_Validators[i];

            if (val.initialvalue == undefined)
                val.initialvalue = "";

            if ($(val).attr("evaluationfunction"))
                  eval("val.evaluationfunction = " + $(val).attr("evaluationfunction") + ";");
            if ($(val).attr("controltovalidate"))
                  val.controltovalidate = $(val).attr("controltovalidate");
            if ($(val).attr("errormessage"))
                  val.errormessage = $(val).attr("errormessage");
            if ($(val).attr("Dynamic"))
                  val.Dynamic = $(val).attr("Dynamic");     
            if ($(val).attr("initialvalue"))
                  val.initialvalue = $(val).attr("initialvalue"); 
                if ($(val).attr("ValidationExpression"))  
                  val.validationexpression =  $(val).attr("ValidationExpression");
         }     
    }
}