logo标签列表

使用jQuery提交表单会导致浏览器崩溃

jquery
3
我正在尝试使用jQuery提交表单，但有时会导致浏览器挂起，有时会崩溃。我正在使用jQuery验证插件，并希望在验证通过后提交表单。是否可能在验证通过后正常提交表单，而不是使用jQuery提交？以下是我的代码片段。
  var validate = function () {

        $('#contactForm').validate({           
            rules: {
                'first-name': {
                    required: true
                },
                'sur-name': {
                    required: true
                }
            },           
            submitHandler: function (form) {

                $('#contactForm').submit();

                return false;
            }
        });
    };

    $('#submitEnquiryForm').click(validate);
2
我希望浏览器不是IE6。 - TJ-
你测试过哪些浏览器？哪些可以正常工作，哪些会崩溃？你可以尝试通过在代码中添加一些 console.log() 来找出它崩溃的具体位置。 - Praxis Ashelin
4个回答
5

这是因为验证通过（监听提交事件），然后您会一遍又一遍地触发submit事件。

submit -> validate -> submit -> validate -> ... -> crash(maximum call stack size exceeded)

尝试：

form.submit();

or: 

$('#contactForm')[0].submit();

将以正常方式提交表单，而不调用 validate 方法。
非常感谢。解释得非常好。 - Ammar Khan
1

你可以使用它来代替jquery.validate：

<style>
    .error {
        border: 2px solid red;
    }
</style>

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
</head>

<body>
   <form id="contactForm" action="javascript:alert('submitted')">
      <input type="text" id="first-name"/>
      <input type="text" id="sur-name"/>
      <input type="submit" />
   </form>
</body>

<script>
   $('#contactForm').submit(function (event) {

      fname = $('#first-name');
      sname = $('#sur-name');

      if (!fname.val())
      {
         fname.addClass('error');
         event.preventDefault();
      }
      else
      {
         fname.removeClass('error');
      }       

      if (!sname.val())
      {
         sname.addClass('error');
         event.preventDefault();
      }
      else
      {
         sname.removeClass('error');
      }
   });
</script>
0
使用jQuery中的.off()事件。.off()方法可以移除使用.on()绑定的事件处理程序。
$('#submitEnquiryForm').off("click").on("click" , validate);
这是否假设他被卡在一个无限的“提交”循环中？ - Praxis Ashelin
有时候它会崩溃，但大部分时间它能成功提交表单。你知道为什么会发生这种情况吗？ - Ammar Khan
0
据我所知，当您单击#submitEnquiryForm时，您的代码将验证#contactForm并提交它。对吗？
当您提交表单时，submitHandler函数被调用，因此您处于无限循环中；提交事件会再次触发提交。
在submitHandler中，您不需要调用submit。
我认为它应该是：
 $('#contactForm').validate({           
    rules: {
        'first-name': {
            required: true
        },
        'sur-name': {
            required: true
        }
    }
});

$('#submitEnquiryForm').click(function(){
    $('#contactForm').submit();
});

当提交事件被触发时，验证表单，如果你想使用点击#submitEnquiryForm而不是它的提交按钮。 submitHandler函数用于其他目的，例如在提交之前进行其他操作或测试。

不，这不会改变行为。在submitHandler内部或外部都没有关系。 - Ram
我说“而不是它的提交按钮”，因此我认为点击#submitEnquiryForm会触发提交和验证插件进行管理。我已经避免了循环...如果#submitEnquiryForm不是提交按钮。如果它是提交按钮，我们将再次循环。 - francadaval
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接