jQuery Validation 插件：submitHandler 在对 servlet 进行 ajax 调用时不会阻止默认提交 - 返回 false 不起作用答案

【问题标题】：jQuery Validation plugin: submitHandler not preventing default on submit when making ajax call to servlet - return false not workingjQuery Validation 插件：submitHandler 在对 servlet 进行 ajax 调用时不会阻止默认提交 - 返回 false 不起作用
【发布时间】：2013-10-23 18:37:39
【问题描述】：

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

【问题讨论】：

标签： jquery ajax forms validation servlets

【解决方案1】：

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

【讨论】：

谢谢，您帮助我以不同的方式可视化问题！我添加了可行的解决方案。

【解决方案2】：

您可以将event 作为submitHandler 的第二个参数，并且可以在其中执行preventDefault。

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

【讨论】：

【解决方案3】：

为了解决这个问题，我在表单提交处理程序中单独验证了表单。我只是在表单提交中检查有效性，只有在 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
});

【讨论】：

【解决方案4】：

$('#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;
    });

【讨论】：

请添加一些上下文，说明您为什么认为这可以解决原始问题

【解决方案5】：

我知道很多人已经回答了，但我会在 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
});

【讨论】：