jQuery验证插件：submitHandler没有preventing于使到servlet的Ajax调用时提交默认 - 返回false不工作 [英] jQuery Validation plugin: submitHandler not preventing default on submit when making ajax call to servlet - return false not working

问题描述

我有一个使用jQuery和一个servlet一个简单的形式。 jQuery的让到servlet Ajax调用，该servlet使得一些服务器端的计算，然后显示通过jQuery在同一页上的结果。我不想的形式做一个默认的提交（去到Servlet），因为我想留在同一页上，并显示结果动态。它的工作原理正是我希望它为是：

I have a simple form that uses jquery and a servlet. The jquery makes an ajax call to the servlet, the servlet makes some server side calculations, then displays the results on the same page via jQuery. I don't want the form to do a default submit (and go to the servlet) because I want to stay on the same page and display results dynamically. It works exactly how I want it to as is:

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的：

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验证插件。

Now, I wanted to add form validation, since the servlet expects decimal numbers to do it's calculations. The user should only be allowed to enter numbers, no other characters. To do this I adopted the popular jQuery Validation plugin.

验证正常工作，但让我Ajax调用这个servlet我必须使用submitHandler jQuery验证提供，而不是上面显示的jQuery的submit方法。当我使用验证submitHandler，执行对提交表单的默认操作，将servlet页面，而不是停留在同一页面上动态地显示在jQuery的我的结果。我必须通过，而不是一个事件像以前一样，这让我prevent默认操作的formHandler一种形式。唯一的选择是返回假的，但它不工作。我一直在试图找出了这一点，在过去的两天，有pretty的多累死我的谷歌福。这里是新的code给我的悲伤：

The validation works as expected, but to make my ajax call to the servlet I have to use the submitHandler jQuery Validation provides, instead of the jQuery submit method shown above. When I use the validation submitHandler, the default action of the form on submit is executed, going to the servlet page instead of staying on the same page to display my results dynamically in jQuery. I have to pass the formHandler a form, instead of an event like before, which allowed me to prevent the default action. The only option is to return false, but it doesn't work. I've been trying to figure this out for the past two days, and have pretty much exhausted my google-fu. Here is the new code giving me grief:

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
        }
 });

任何帮助将是AP preciated，我想利用这个整齐的jQuery的表单验证，但我可能只是写我自己的jQuery从头验证，这样我就可以使用的形式提交，我已经有工作法

Any help would be appreciated, I'd like to use this neat jQuery form validation, but I may just write my own jQuery validation from scratch so that I can use the form submit method that I already have working.

推荐答案

通过提交事件已触发为时已晚，以prevent提交表单的时间。你应该绑定到提交按钮和使用情况。preventDefault（）click事件从提交阻止它。如果您的验证程序成功完成后，您可以使用$ .serialize（）和$ .submit（）来手动提交表单。

By the time the submit event has fired it's too late to prevent the form from submitting. You should bind to the click event on the submit button and use event.preventDefault() to stop it from submitting. If your validation routine completes successfully you can use $.serialize() and $.submit() to manually submit the form.

这篇关于jQuery验证插件：submitHandler没有preventing于使到servlet的Ajax调用时提交默认 - 返回false不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！