jQuery验证插件：submitHandler在对servlet进行ajax调用时不阻止默认提交-返回false不工作

我有一个使用jquery和servlet的简单表单。jquery对servlet进行ajax调用，servlet进行一些服务器端计算，然后通过jquery在同一页面上显示结果。我不希望表单执行默认提交（并转到servlet），因为我希望保持在同一页面上并动态显示结果。它的工作方式正是我所希望的：

HTML:

现在，我想添加表单验证，因为servlet需要十进制数字来进行计算。用户只能输入数字，不能输入其他字符。为此，我采用了流行的插件

验证按预期工作，但要对servlet进行ajax调用，我必须使用jQuery验证提供的submitHandler，而不是上面所示的jQuery submit方法。当我使用validation submitHandler时，表单在提交时的默认操作被执行，转到servlet页面，而不是停留在同一页面上，以便在jQuery中动态显示我的结果。我必须向formHandler传递一个表单，而不是像以前那样的事件，它允许我阻止默认操作。唯一的选择是返回false，但它不起作用。在过去的两天里，我一直在努力想办法解决这个问题，我的谷歌fu已经精疲力竭了。以下是让我感到悲伤的新代码：

form.validate({
       rules: {
            number0: ruleSet,
            number1: ruleSet,
            number2: ruleSet,
            number3: ruleSet,
        },
        submitHandler: function (form) {

            $.ajax({
                type: "POST",
                url: form.attr("action"),
                data: form.serialize(),
                success: function () {
                    // get response from servlet and display on page via jQuery 
                }
            });
            return false; // required to block normal submit ajax used
        }
 });

---

如果有任何帮助，我将不胜感激，我希望使用这个简洁的jQuery表单验证，但我可以从头开始编写自己的jQuery验证，这样我就可以使用我已经在使用的表单提交方法。

当提交事件触发时，阻止表单提交已经太晚了。您应该绑定到submit按钮上的click事件，并使用event.preventDefault（）停止提交。如果验证例程成功完成，则可以使用$.serialize（）和$.submit（）手动提交表单

为了解决这个问题，我分别验证表单和表单提交处理程序。我只是在表单submit中检查有效性，仅当为true时才执行ajax调用。这允许处理提交事件的操作（preventDefault（）），而不管是否进行ajax调用

form.validate({
    rules: {
        number0: ruleSet,
        number1: ruleSet,
        number2: ruleSet,
        number3: ruleSet,
    }
});

form.submit (function(event) {
    if (form.valid())
    {
        $.ajax({
            type: form.attr("method"), // use method specified in form attributes
            url: form.attr("action"), // use action specified in form attributes
            data: form.serialize(), // encodes set of form elements as string for submission
            success: function(data) {
                // get response from servlet and display on page via jQuery 
            }
        });
    }
    event.preventDefault(); // stop form from redirecting to java servlet page
});

---

您可以将

event

作为

submitHandler

的第二个参数，并且可以在那里执行

preventDefault

submitHandler: function (form, event) {
    event.preventDefault();
    // your remaining code goes below this.
}

---

我知道很多人已经回答了，但我将在2020年展示我的全部代码

$(document).ready(function () {
    $("#PaymentModeForm").validate({
        rules: {
            "f_cheque_mode_display": {
                required: true,
            },
            "f_cheque_infavour": {
                required: true,
            },
            "f_cheque_payablein": {
                required: true,
            },
            "f_cheque_address": {
                required: true,
            },
            "f_cheque_mobileno": {
                required: true,
            },
            "f_bank_mode_display": {
                required: true,
            },
            "f_bank_beneficiary": {
                required: true,
            },
            "f_bank_acc": {
                required: true,
            },
            "f_bank_bankname": {
                required: true,
            },
            "f_bank_branchname": {
                required: true,
            },
            "f_bank_ifsc": {
                required: true,
            },
            "f_cod_mode_display": {
                required: true,
            },
            "f_cod_mode_charges": {
                required: true,
            },
            "f_razorpay_mode_display": {
                required: true,
            },
            "f_razorpay_key": {
                required: true,
            },
            "f_razorpay_secret": {
                required: true,
            }
        },
        messages: {
            "f_cheque_mode_display": {
                required: "Enter Payment mode display on website"
            },
            "f_cheque_infavour": {
                required: "Enter Infavour Of",
            },
            "f_cheque_payablein": {
                required: "Enter Payble In",
            },
            "f_cheque_address": {
                required: "Enter Courier Address",
            },
            "f_cheque_mobileno": {
                required: "Enter Mobile No",
            },
            "f_bank_mode_display": {
                required: "Enter Payment mode display on website"
            },
            "f_bank_beneficiary": {
                required: "Enter Beneficiary Name",
            },
            "f_bank_acc": {
                required: "Enter A/C No",
            },
            "f_bank_bankname": {
                required: "Enter Bank Name",
            },
            "f_bank_branchname": {
                required: "Enter Branch Name",
            },
            "f_bank_ifsc": {
                required: "Enter IFSC Code",
            },
            "f_cod_mode_display": {
                required: "Enter Payment mode display on website",
            },
            "f_cod_mode_charges": {
                required: "Enter COD Charges",
            },
            "f_razorpay_mode_display": {
                required: "Enter Payment mode display on website",
            },
            "f_razorpay_key": {
                required: "Enter Key Id",
            },
            "f_razorpay_secret": {
                required: "Enter Secret Key",
            }
        },
        submitHandler: function (form, e) { 
            e.preventDefault();
            var form = $(this);
            var url = "/PaymentModeSubmit";
            $.ajax({
            type: "POST",
            url: url,
            data: $("#PaymentModeForm").serialize(),
            success: function(data)
            {
                alert(data);
            }
            });      
        return false;
        }
    });
    return
});

---

谢谢你，你帮助我以不同的方式想象这个问题！我添加了有效的解决方案。请添加一些上下文，说明为什么您认为这可以解决原始问题

$('#post_form_jason_data').click(function() {
$('#myform').validate({ 
    rules: {
        txtwtrt: {
            required: true
           // email: true
        },
        tax_name: {
            required: true,
            minlength: 5
        },
    tax_rate: {
            required: true
            //minlength: 5
        }
    }
});
alert('insert the value');
if (('#myform').valid()){


        $.ajax({
            url: "swt_tax_add.html",
            type: 'POST',
            data : $('#myform').serialize(),                
            success: function(msg) {
                window.location.href='swt_tax/?st=1';
                $('#message').html(msg);            

            }

        });
    }

        return false;
    });

submitHandler: function (form, event) {
    event.preventDefault();
    // your remaining code goes below this.
}

$(document).ready(function () {
    $("#PaymentModeForm").validate({
        rules: {
            "f_cheque_mode_display": {
                required: true,
            },
            "f_cheque_infavour": {
                required: true,
            },
            "f_cheque_payablein": {
                required: true,
            },
            "f_cheque_address": {
                required: true,
            },
            "f_cheque_mobileno": {
                required: true,
            },
            "f_bank_mode_display": {
                required: true,
            },
            "f_bank_beneficiary": {
                required: true,
            },
            "f_bank_acc": {
                required: true,
            },
            "f_bank_bankname": {
                required: true,
            },
            "f_bank_branchname": {
                required: true,
            },
            "f_bank_ifsc": {
                required: true,
            },
            "f_cod_mode_display": {
                required: true,
            },
            "f_cod_mode_charges": {
                required: true,
            },
            "f_razorpay_mode_display": {
                required: true,
            },
            "f_razorpay_key": {
                required: true,
            },
            "f_razorpay_secret": {
                required: true,
            }
        },
        messages: {
            "f_cheque_mode_display": {
                required: "Enter Payment mode display on website"
            },
            "f_cheque_infavour": {
                required: "Enter Infavour Of",
            },
            "f_cheque_payablein": {
                required: "Enter Payble In",
            },
            "f_cheque_address": {
                required: "Enter Courier Address",
            },
            "f_cheque_mobileno": {
                required: "Enter Mobile No",
            },
            "f_bank_mode_display": {
                required: "Enter Payment mode display on website"
            },
            "f_bank_beneficiary": {
                required: "Enter Beneficiary Name",
            },
            "f_bank_acc": {
                required: "Enter A/C No",
            },
            "f_bank_bankname": {
                required: "Enter Bank Name",
            },
            "f_bank_branchname": {
                required: "Enter Branch Name",
            },
            "f_bank_ifsc": {
                required: "Enter IFSC Code",
            },
            "f_cod_mode_display": {
                required: "Enter Payment mode display on website",
            },
            "f_cod_mode_charges": {
                required: "Enter COD Charges",
            },
            "f_razorpay_mode_display": {
                required: "Enter Payment mode display on website",
            },
            "f_razorpay_key": {
                required: "Enter Key Id",
            },
            "f_razorpay_secret": {
                required: "Enter Secret Key",
            }
        },
        submitHandler: function (form, e) { 
            e.preventDefault();
            var form = $(this);
            var url = "/PaymentModeSubmit";
            $.ajax({
            type: "POST",
            url: url,
            data: $("#PaymentModeForm").serialize(),
            success: function(data)
            {
                alert(data);
            }
            });      
        return false;
        }
    });
    return
});