jQuery：防止按钮/单击事件上的表单提交答案

【问题标题】：jQuery: Prevent Form Submission on Button / Click EventjQuery：防止按钮/单击事件上的表单提交
【发布时间】：2013-12-22 14:26:23
【问题描述】：

我使用以下脚本来确保<select> 字段在提交表单时应用了一个值（默认值除外）。

// form-submit
$('#form-register form .button').click(function(e) {
  e.preventDefault();  // don't submit it
  var submitOK = true;
  $('#form-register').find("select").each(function() {
        if ($(this).val() == "Select Brand") {
              alert ('Please select an appliance and a brand');
              submitOK = false;
              return false;  // breaks out of the each
       }
  });
  if (submitOK) {
        $('#form-register form').submit();
  }
});

我必须将该函数绑定到按钮上的 click() 事件，因为将它放在表单的 submit() 事件上会导致我的浏览器出现“递归过多”错误。

但是现在我遇到的问题是脚本似乎无法阻止表单提交，即使验证错误已提醒用户。

有谁知道我可以如何修改它以防止在发生验证错误时提交表单？

我开始认为我正在为 WordPress 使用重力形式这一事实可能会让事情变得困难。如果有帮助，这里是提交按钮的标记（包括一些 jQuery）：

<input type="button" onclick="jQuery(&quot;#gform_target_page_number_1&quot;).val(&quot;2&quot;); jQuery(&quot;#gform_1&quot;).trigger(&quot;submit&quot;,[true]); " tabindex="13" value="Register My Appliances" class="button gform_next_button" id="gform_next_button_1_14">

【问题讨论】：

考虑使用表单 'onsubmit' 处理程序（如您之前所做的那样）根本不可能从“onclick”按钮处理程序取消表单提交。
您可以在此测试页面上看到，“点击”处理程序无法取消表单提交 - jsbin.com/iDuYefed/1/edit
谢谢，但是如果我在表单提交上运行该函数，那么我会收到一个“递归过多”错误，因为函数本身触发了一个“.submit()”事件。你是这个意思吗？

标签： jquery forms validation form-submit

【解决方案1】：

修好了！我像这样重新调整了我的脚本，它似乎工作得很好：

$('#form-register form').submit(function(e) {

        var error = 0;      
        $('#form-register').find("select").each(function() {
            if ($(this).val() == "Select Brand") {
                error ++;
                }
        });

        if (error > 0) {
            alert ('Please select an appliance and a brand');
            return false;
        }
    });

【讨论】：