带有 ASP.NET 更新面板内的错误摘要的 jQuery 验证器

Question

我想知道是否有人可以帮助我解决一个困扰我一段时间的问题。

我想在我的页面的更新面板中包含 jQuery 验证和错误摘要。然而，我发现当错误摘要 div 在更新面板内时，在第一次回发之后，摘要不再显示 - 但是当我设置的条件不满足时，jQuery 仍在验证表单并防止回发。

澄清一下，我遇到以下情况：

1. 第一次加载页面，尝试在未完成详细信息的情况下提交页面 -> 阻止回发并按预期显示错误摘要。

2. 填写姓名字段，点击提交->页面正确提交到服务器。

3. 现在清空名字或姓氏字段并单击提交 -> 页面不会回发到服务器，但不会向用户显示错误摘要。

4. 填写姓名字段 -> 页面已正确回传

如果您将错误摘要 div (div class="error-container") 移到更新面板之外，页面将按预期工作。不幸的是，我的设计无法做到这一点。

我想知道是否有人遇到过这个问题，您是否找到了解决方法？

要重新创建我的问题，您可以使用以下代码：

TestValidator.aspx

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

姓名：
姓：

                $(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

结束类

谢谢 大卫

Answer 1

这就是我如何让我的 jQuery 函数在我的更新面板中运行每个页面加载：

// 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

}

我将所有的 js 放在页面底部，这通常在我的 jQuery 和插件引用之后的外部 js 文件中引用。