jQuery Validation插件：在对servlet进行ajax调用时，submitHandler不会阻止提交时的默认值 – 返回false不能正常工作
我有一个使用jquery和servlet的简单表单。 jquery对servlet进行ajax调用，servlet进行一些服务器端计算，然后通过jQuery在同一页面上显示结果。 我不希望表单执行默认提交（并转到servlet），因为我想保持在同一页面上并动态显示结果。 它的工作方式与我想要的完全一致：
HTML：
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 });
现在，我想添加表单validation，因为servlet需要十进制数来进行计算。 只允许用户输入数字，不允许输入其他字符。 为此，我采用了流行的jQuery Validation插件。
validation按预期工作，但是要对servlet进行ajax调用，我必须使用submitHandler jQuery Validation提供，而不是上面显示的jQuery submit方法。 当我使用validationsubmitHandler时，执行表单上的默认操作，进入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表单validation，但我可能只是从头开始编写自己的jQueryvalidation，以便我可以使用我已经工作的表单提交方法。
当提交事件被触发时，要阻止表单提交已经太晚了。 您应该绑定到提交按钮上的click事件，并使用event.preventDefault（）来阻止它提交。 如果validation例程成功完成，您可以使用$ .serialize（）和$ .submit（）手动提交表单。
要解决此问题，我将表单单独validation表单提交处理程序。 我只是在表单提交中检查有效性，只有在执行时才执行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. }
$('#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; });