使用jQuery promise（）

Question

我正在尝试在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错误：

未捕获RangeError：超出最大调用堆栈大小

Answer 1

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

1. 提交，防止默认操作
2. 检查字段
3. 如果它们有效，则为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;
});

Answer 4

首先，.promise().done(...)可以被清除。如前所述，没有任何异步发生。

除此之外，实际问题很可能是重复重新调用提交处理程序。

尝试使用POJS（而不是jQuery）表单提交：

if(formValid) {
    this.submit();
}