Question

jQuery promise() 超出最大调用堆栈大小

2017-01-22

1462

javascript jquery promise

我尝试在 jQuery 中应用简单的表单验证。如果表单字段为空，则添加类 error 。如果任何字段为空，则不要提交。我有以下问题：

$('#contact-form').submit(function(event) {
    event.preventDefault();

    var formValid = true;
    $('input.required, textarea.required, select.required').each(function() {
        if($(this).val() === '') {
            formValid = false;
            $(this).addClass('error');
        } else {
            $(this).removeClass('error');
        }
    }).promise().done(function() {
        if(formValid) {
            $('#contact-form').submit();
        }
    });
});

然而，当代码到达提交表单的行时，我看到了 JavaScript 错误：

Uncaught RangeError：超出最大调用堆栈大小

Answer 1

如果表单有效，代码将按以下方式运行：

提交时，阻止默认操作
检查字段
如果有效，form.submit - 引发提交事件，转到步骤 1

无限递归

非常简单，因为处理程序中没有异步代码

$('#contact-form').submit(function(event) {
    var formValid = true;
    $('input.required, textarea.required, select.required').each(function() {
        if($(this).val() === '') {
            formValid = false;
            $(this).addClass('error');
        } else {
            $(this).removeClass('error');
        }
    });
    if (!formValid) {
        event.preventDefault();
    }
});

Answer 2

您需要验证多少个字段，为什么承诺与每个字段相关联？检查完所有字段后再尝试

if(formValid) {
            $('#contact-form').submit();
        }
else return false

Answer 3

$('#contact-form').submit(function(event) {
   event.preventDefault();
   var formValid = true;
   $('input.required, textarea.required, select.required').each(function() {
      if($(this).val() === '') {
         formValid = false;
         $(this).addClass('error');
      } else {
         $(this).removeClass('error');
      }
   }).promise().done(function() {
      if(formValid) {
         $("#contact-form").off('submit').submit();
      } 
   });
   return false;
});