从 jQuery 验证中动态删除 submitHandler，以允许正常的PayPal“捐赠”按钮操作

Dynamically remove submitHandler from jQuery Validate to allow normal PayPal 'donate' button action

本文关键字：PayPal 许正常 捐赠 操作 按钮 验证 jQuery 动态 删除 submitHandler      更新时间：2023-09-26

我必须在 AngularJS 捐赠表单的中间添加一个PayPal捐赠按钮，以便将PayPal生成的表单标签嵌套在捐赠表单标签中。

捐赠表单由旧版本(1.12(的jQuery Validate处理，因此无法访问.rules()函数。

我找到了一种通过这个答案验证要求的方法(下面注释掉了代码(，但问题是 submitHandler 采用"form"的参数，它始终是父表单元素(完整的捐赠表单(。

理想情况下，我想在选择PayPal后一起禁用 jQuery 验证。

这是当用户选择"信用卡"与"PayPal"时我调用的函数，并且在选择PayPal时它正确地进入其他函数。

    $scope.payByCreditCard= function(cc_true) {
    if(cc_true){
        $scope.creditCardDetails = true;
        $scope.submit_text = "Submit Donation";
        $scope.method_type = "donate";
    } else {
        $scope.creditCardDetails = false;
        $scope.submit_text = "Continue Donation on Paypal";
        $scope.method_type = "startDonation";
        // var settings = $('#donationForm').validate().settings;
        // delete settings.rules;
        // $("*").removeClass("required");
    }
};

以及带有提交处理程序的 jQuery 验证调用：

$('#donationForm').validate({
    rules: {
        otherDonationAmount: {
            money: true,
            required : true
        }
    },
    errorPlacement : function(error, element) {
        if (element.attr('id') == 'donationAmount') {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function(form) {
        $('#donation-errors').remove();
        window.scrollTo(0, 0);
        $("#donationForm").hide();
        $("#donationForm").before('<div class="well donation-loading" style="text-align:center;">' +
                         This may take a few seconds. Do not leave the page or click the back button.' + '</div>');
    }
});

发生的事情是我禁用了验证，但是当我单击PayPal捐赠按钮时，submitHandler 函数被触发，它尝试处理整个捐赠表单，而不是遵循PayPal生成的代码中的内容：

                            <form action="https://www.paypal.com/xxx/xxx" method="post" target="_top">
                            <input type="hidden" name="" value="">
                            <input type="hidden" name="" value="">
                            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                        </form>

因此，我正在寻找一种方法来禁用jQuery验证作为验证器和提交处理程序，如果满足条件(用户选择PayPal(。

引用 OP：

"...将PayPal生成的表单标签嵌套在捐赠表单标签中。

这是完全无效的HTML，这是一个非常糟糕的主意。我会放弃任何将<form></form>容器放置在<form></form>容器中的设计。

引用 OP：

"捐赠表格由旧版本(1.12(的jQuery Validate处理，因此无法访问.rules()功能。

那不是真的。.rules()方法可以追溯到许多版本/年份，包括 1.12，它仅比最新版本 (1.13( 晚一个版本。

引用 OP：

"...当我单击PayPal捐赠按钮时，submitHandler 函数被触发，它会尝试处理整个捐赠表单，而不是遵循PayPal生成的代码中的内容">

当然有。您的HTML完全无效，因此会发生各种意想不到的事情。

引用 OP：

"理想情况下，我想在选择PayPal后一起禁用jQuery验证。...因此，我正在寻找一种方法来禁用jQuery验证作为验证器，并在满足条件时submitHandler(用户选择PayPal(。

在表单上初始化后，您将无法切换或禁用 jQuery 验证插件、.validate() 方法或其任何选项(包括 submitHandler (。这是没有任何解决方法的绝对限制。

开发人员唯一允许您"动态"做的事情是......

  • 使用 .rules('add') 和 .rules('remove') 方法添加/删除某些规则。(是的，这些方法在几年前的所有插件版本中都可用，包括 v1.12(

  • 还可以使用 depends 属性切换某些布尔规则。

  • 如果切换字段的可见性，则也会切换对该字段的验证功能。

为什么你不能只拥有两个完全独立和独立的表单，每个表单都有自己的动作、规则等，然后使用 jQuery 动态显示你需要的表单？默认情况下，jQuery Validate 插件将自动忽略任何隐藏的表单和字段。

相关文章：