jQuery验证插件：在对ajax调用servlet时，submitHandler不会阻止默认提交-返回false无效

Question

我有一个使用jquery和servlet的简单表单。jQuery对Servlet进行Ajax调用，然后Servlet进行一些服务器端计算，然后通过jQuery在同一页面上显示结果。我不希望表单进行默认的提交（并转到servlet），因为我想停留在同一页面上并动态显示结果。它完全按照我想要的方式工作：

HTML：

<form name="form1" action="FormHandler1" method="POST" class="stats-form">
    <input class="stats-input" id="number0" type="text" name="number0">
    <input id="number1" type="text" name="number1">
    <input id="number2" type="text" name="number2">
    <input id="number3" type="text" name="number3">
    <input type="submit" value="Calculate" class="calculate-stats" name="stats-submit">
</form>

jQuery的：

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

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

验证工作正常，但是要对servlet进行ajax调用，我必须使用jQuery
Validation提供的SubmitHandler，而不是上面显示的jQuery
Submit方法。当我使用验证submitHandler时，将执行表单上提交的默认操作，转到Servlet页面，而不是停留在同一页面上以在jQuery中动态显示我的结果。我必须向formHandler传递一个表单，而不是像以前那样传递一个事件，这使我能够阻止默认操作。唯一的选择是返回false，但是它不起作用。在过去的两天里，我一直在努力解决这个问题，并且已经使我的google-
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验证，以便可以使用已经使用的表单提交方法。

Answer 1

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