Максимальный размер стека вызовов превышен с помощью jQuery prom()

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

Howerver когда код попадает в линию, чтобы отправить форму, я вижу ошибку JavaScript:

Uncaught RangeError: Максимальный размер стека вызовов превысил

Answer 1

Вот как ваш код будет работать, если форма является действительным:

1. по представить, предотвратить действие по умолчанию
2. проверки полей
3. , если они действительны, форма .submit - который вызывает событие отправки, goto шаг 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(); 
}