使用JavaScript将表单提交到两个不同的位置，然后使用jQuery进行validation

我有一个名为#summaryforms的表单，用户可以立即预订或稍后预订。

这是我的按钮：

 
 <input type="hidden" name="bookingid" value="" />  

  

但是，每当我尝试使用jQueryvalidation时，例如：

 $("#summaryforms").validate(); 

它不起作用，我没有错误，我怀疑这是因为它在调用jQuery之前提交，有没有办法解决这个问题，同时仍然保持提交到两个不同位置的选项？

Answer 1

从button元素中删除内联onClick处理程序。 你正在使用jQuery，它不需要任何内联JavaScript。 其次，由于jQuery Validate插件已经内置了submit事件处理程序，因此您需要将按钮放在

并分别捕获它们的click事件。

我删除了内联onclick处理程序并添加了id属性。 我还用/>自行关闭input标签。

HTML ：

 
 ... 
 
     

jQuery ：

 $(document).ready(function() { $('.button').each(function () { $(this).on('click', function () { var action; if ($(this).attr('id') == "now") { action = 'payment.php'; } else { action = 'poa.php'; } $('#summaryforms').attr('action', action).submit(); }); }); $('#summaryforms').validate({ // initialize the plugin // any options and/or rules }); }); 

演示： http ： //jsfiddle.net/a9zAh/

---

编辑 ：

引用OP ：

“…我怀疑这是因为它在调用jQuery之前提交……”

它不应该。 调用submit()应该只触发validation，因为插件内置了一个submit事件监听器。 您的代码中可能存在另一个问题，即您未在OP中显示我们。 也许您对规则的定义存在问题。 此外，您的id是summaryforms ; 为什么是复数？ id应该是唯一的，如果您在共享id="summaryforms"的页面上有多个form或任何元素，则会导致问题。

按照上面的工作代码和jsFiddle演示作为您的模型，如果您遇到困难，请提出问题。

Answer 2

绝对。 您想“捕获”正常提交，防止它发生，然后进行validation。

要阻止表单提交，请确保它具有ID（您似乎这样做），并使用以下内容：

 // on DOM load... jQuery(function () { // attach a handler to the SUBMIT of your form jQuery('#summaryforms').submit( function () { // do validation or whatever, and if it passes, return true // to submit if (myFormIsValid) { return true; } // otherwise, prevent it from submitting "normally" return false; }); }); 

Answer 3

问题是结合javascript和jQuery。 一般来说，javascript优先于jQuery。 如果你这样做，像IE这样的浏览器会产生意想不到的结果。 尝试如下，

编辑脚本：

在jQuery中，

  $(document).ready(function(){ $("#summaryforms").validate(); $("#summaryforms input.button").click(function(e){ var action = ''; if($(e.target).val() === 'Book Now'){ action = 'payment.php'; }else if($(e.target).val() === 'Book Later'){ action = 'poa.php'; } $("#summaryforms").attr('action', action); $("#summaryforms").submit(); }) }); 

在HTML中，