jQuery Validator with Error Summary Inside ASP.NET Update Panel

Question

I wonder if somebody could help me out with an issue which has been stressing me out for some time now.

I want to include jQuery validation and the error summary inside an update panel on my page. I have found however that when the error summary div is inside the update panel, following the first postback, the summary no longer displays - however jQuery is still validating the form and preventing postbacks when the conditions I have set are not met.

To clarify, I am experiencing the following:

1. First load of the page, attempt to submit the page without completing details -> post back is prevented and error summary is displayed as expected.

2. Complete the forename and surname field, click submit -> the page is correctly submitted to the server.

3. Now blank out either the forename or surname field and click submit -> the page does not postback to the server, however the error summary is not displayed to the user.

4. Complete the forename and surname field -> the page is correctly posted back

If you move the the error summary div (div class="error-container") outside of the update panel the page works as expected. Unfortunately I am not able to do this with my design.

I wonder if anybody has experienced this issue, and whether you have found a work around?

To Recreate my issue you can use the following code:

TestValidator.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestValidator.aspx.vb" Inherits="TestValidator" %>

Forename:
Surname:

                $(document).ready(function () {

                    load();

                    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
                        load();
                    });

                });

                function load() {

                    $("#<%= Me.Page.Form.ClientId %>").validate({
                        errorLabelContainer: $("ul", $('.error-container')),
                        wrapper: 'li'
                    });
                }

                function checkForm() {
                    return $("#<%= Me.Page.Form.ClientId %>").valid();
                }


            </script>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

TestValidator.aspx.vb

Partial Class TestValidator
Inherits System.Web.UI.Page

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
    Me.btnSubmit.Text = "Submitted at: " & Now.ToString
End Sub

End Class

Thanks David

Answer 1

This is how I get my jQuery functions to run every page load inside my updatepanels:

// Attach our single function that will call all of the functions 
// we want to run OnLoad to the Sys.Application.add_load handler.

if (Sys != undefined && Sys.Application) { 
    Sys.Application.add_load(callOnLoadFunctions); 
} else { 
    window.onload = callOnLoadFunctions; 
}

function callOnLoadFunctions() {

    // Add all the functions to be called

    load();            // your method
    function1();       // some other function
    function2();       // another function

}

I put all my js at the bottom of the page, and this is usually referenced in an external js file right after my jQuery and plugins references.