小编典典

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

ajax

我有一个使用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验证,以便可以使用已经使用的表单提交方法。


阅读 513

收藏
2020-07-26

共1个答案

小编典典

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

2020-07-26