Page_ClientValidate is validating multiple times.

Question

problem i have is that, the validation summary message(alert) is displayed twice. I cannot figure out the reason.

Please help. Here is the code

function validate() //javascript function
{
    if (typeof(Page_ClientValidate) == 'function') 
    {
        var isPageValid = Page_ClientValidate();
        if(isPageValid)
        {
        }
    }
}

<asp:Button ID="btn1" runat="server" OnClientClick="validate()" Text="button"
                    ValidationGroup="ContactGroup" />

<asp:ValidationSummary ID="ValidationSummary1" runat="server" DisplayMode="List" 
                    ShowMessageBox="true" ShowSummary="false" ValidationGroup="ContactGroup" />

Solution 1

The problem is that the function Page_ClientValidate takes an input parameter, if you don't specify the input then the validationsummary triggers once per groupname.

In your case, the function triggers twice: once for groupname="ContactGroup" and another time for groupname=""

you should change

var isPageValid = Page_ClientValidate();

to

var isPageValid = Page_ClientValidate('');

if you don't want to specify a ValidationGroup, or if you want to specify a groupname then you need to call Page_ClientValidate like so:

var isPageValid = Page_ClientValidate('ContactGroup');

Solution 2

First of all you should lose the ValidationGroup="ContactGroup" from the button because having validation group in it will first call of the validation on the page then the OnClientClick event that contains the validate function which will call the page validation once again.

Then you should pass the validation group "ContactGroup" to the Page_ClientValidate() function so it knows which controls to validate because simply calling Page_ClientValidate() will validate all controls regardless of their validation group(and it may display the validation message more than once, depending on how many validation groups you have).

In short do something like this:

function validate() //javascript function
{
    if (typeof(Page_ClientValidate) == 'function') 
    {
        var isPageValid = Page_ClientValidate('ContactGroup');
        if(isPageValid)
        {
          //your custom code
        }
    }
}    

<asp:textbox id="txtMyBox" runat="server"/>
<asp:requiredFieldValidator Id="rfv1" runat="server" ControlToValidate="txtMyBox"
ValidationGroup="ContactGroup" ErrorMessage="Bad!"/>

<asp:Button ID="btn1" runat="server" OnClientClick="validate()" Text="button"/>

<asp:ValidationSummary ID="ValidationSummary1" runat="server" DisplayMode="List" 
                    ShowMessageBox="true" ShowSummary="false" ValidationGroup="ContactGroup" />

Solution 3

just return false from the function and change the OnClientClick as shown below:

<asp:Button ID="btn1" runat="server" OnClientClick="return validate();" Text="button" 
                        ValidationGroup="ContactGroup" /> 

        function validate() //javascript function   
        {   
            if (typeof(Page_ClientValidate) == 'function')    
            {   
                var isPageValid = Page_ClientValidate();   
                if(isPageValid)   
                {   
                }   
            }   
        return false;

} 

Solution 4

I know this is an old post, but here's a solution that may be more flexible. Similar to other users suggestions, this solution accepts the validation group that is passed by default by the asp.net validation controls. This way you would not need to add the OnClientClick="validate()" on the Button control.

//Make sure the Page_ClientValidate function exists
if (typeof (Page_ClientValidate) == "function") {
    //Stash the old implementation in a temp variable
    Page_ClientValidateOld = Page_ClientValidate;

    //Create a new implementation and store it
    //in Page_ClientValidate. Callers will now get
    //this implementation.
    Page_ClientValidate = function (validationGroup) {
        var isValid;

        //Call the old implementation first…
        isValid = Page_ClientValidateOld(validationGroup);

        //and then call our extension
        if (!isValid) {
            // Do something
        }

        return isValid;
    }
}

If you want to read more on this approach, I recommend that you look at this blog post: http://hyperthink.net/blog/interception-patterns-in-javascript/

Solution 5

There is no need to manually call the Page_ClientValidate function, unless you're wanting to do the validation outside of a postback attempt.

Set the buttons CausesValidation to true. That'll run the validation.

View more solutions