我目前有一个包含两个文本框和一个提交按钮的表单。我在两个文本框上使用 jquery 验证,但由于我使用 asp.net UpdatePanel 将数据发送到使用 AJAX 的服务器,所以我在验证时遇到了一些麻烦。
发生的事情是我已经使用以下代码进行了验证:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Register.ascx.cs" Inherits="CapcoControls.Register" %>
<div id="register">
<form id="Form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel id="pnlWrapper" ClientIDMode="Static" runat="server">
<asp:TextBox ID="txtName" runat="server" MaxLength="200" TabIndex="1" ClientIDMode="Static" title="NAME"></asp:TextBox>
<asp:TextBox ID="txtEmail" runat="server" MaxLength="200" TabIndex="2" ClientIDMode="Static" title="EMAIL ADDRESS"></asp:TextBox>
<asp:ImageButton ID="btnSubmit" runat="server"
ImageUrl="~/images/btn_submit.png" ClientIDMode="Static"
onclick="btnSubmit_Click" TabIndex="3" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</div>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initializeRequestHandler);
function initializeRequestHandler(sender, args) {
if (args.get_postBackElement().id == '<%= btnSubmit.ClientID %>' && $("#Form1").valid() !== true) {
args.set_cancel(true);
}
}
$(document).ready(function () {
$("#Form1").validate({
rules: {
<%= txtName.UniqueID %>: {
required: true,
checkDefaultValue: true
},
<%= txtEmail.UniqueID %>: {
required: true,
email: true,
checkDefaultValue: true
}
},
messages: { },
errorPlacement: function(error, element) { }
});
});
</script>
问题是,一旦用户输入有效数据,服务器端点击事件就会被调用两次,但我不知道为什么?有人有什么主意吗?
我的直觉是这与我的 jquery validate 即有关。该按钮默认发回,然后由于 jquery 验证,我以某种方式再次提交表单。
有谁知道我在这里哪里出错了?
谢谢