javascript - 表单提交未在 ASP.NET 页面上发回

Question

我在 ASP.NET 中有一个带有此按钮的表单:

<asp:Button ID="btnNext"
runat="server"
CausesValidation="false"
Text="Submit Form" />

我使用 jQuery Validate 对此表单进行验证，如下所示:

jQuery(function() {
    jQuery('#form1').validate({
        rules: {
            txtSerialNumber: {
                required: true
            }
        },
        messages: {
            txtSerialNumber: {
                required: "Please enter a serial number."
            }
        }
    });
});

还有更多，但所有字段都相同。我已经验证此验证代码有效。

我还有一些 javascript 来调用验证代码，因为它之前不起作用(由于各种原因)。

jQuery('#btnNext').on("click", function () {
    if (jQuery("#form1").valid()) {
        jQuery(this).prop('disabled', true); // prevent multiple submits
        return true;
    } else {
        return false;
    }
});

编辑:当我注释掉禁用按钮的行时，表单会正确提交。因此，在页面回发之前禁用提交按钮似乎会导致页面无法回发。

当我单击此按钮提交表单时，上面的 JavaScript 会被调用，但页面不会回发并提交。我一直在绞尽脑汁试图弄清楚这个问题。是否有明显的原因导致它无法正常工作？我错过了什么？

Answer 1

向按钮添加一个 OnClientClick 事件，该事件将调用验证，而不是使用 jquery 添加 .on("click") 事件处理程序。

<asp:Button ID="btnNext"
    runat="server"
    CausesValidation="false"
    Text="Submit Form"
    OnClientClick="validate()" />

JavaScript:

function validate () {
   if (jQuery("#form1").valid()) {
       jQuery(this).prop('disabled', true); // prevent multiple submits
       return true;
   } else {
       return false;
   }
});