jQuery验证插件：submitHandler在对servlet进行ajax调用时不防止默认提交 - 返回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插件。

验证按预期工作，但为了让我的ajax调用servlet，我必须使用jQuery验证提供的submitHandler，而不是上面显示的jQuery提交方法。当我使用验证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

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

Answer 2

为了解决这个问题，我单独验证了表单的表单提交处理程序。我只需在表单提交中对有效性进行检查，只有在正确的情况下才执行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 
}); 

Answer 3

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

Answer 4

你可以有event作为submitHandler第二个参数，可以做preventDefault有本身。

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