jQuery:防止按钮/单击事件上的表单提交

Question

我使用以下脚本来确保 <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();
  }
});

我必须将该函数绑定(bind)到 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">

Answer 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;
        }
    });