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

时间:2013-12-22 14:26:24

标签: jquery forms validation form-submit

我正在使用以下脚本,以确保在提交表单时<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()事件中将其添加到我的浏览器中会导致“过多的递归”错误。

但是现在我遇到的问题是脚本似乎无法阻止表单提交,即使向用户发出了验证错误。

有没有人知道如何修改它以防止在验证错误时提交表单?

我开始认为我正在使用Gravity Forms for 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">

1 个答案:

答案 0 :(得分:3)

修正了它!我像这样重新调整了我的脚本,它看起来效果很好:

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