javascript - 表单提交时出现 JQuery RangeError

Question

我有一个正在实现一些自定义验证的表单。这是在提交表单之前处理最终检查的 JavaScript block :

$('.enquiry-form-container form').submit(function (e) {
        e.preventDefault();
        var invalid = false;
        var isblank = false;
        //Loop through each input and check if valid or empty
        $('.validate').each(function () {
            if ($(this).hasClass('invalid')) {
                isInValid($(this));
                invalid = true;
            } else {
                //Any fields are blank
                if ($(this).val() === "") {
                    $(this).addClass('blank');
                    isblank = true;
                } else {
                    $(this).addClass('valid');
                    isValid($(this));
                    $(this).removeClass('blank empty');
                }
            }
        });

        if (!invalid & !isblank){ //SEND
            $(this).find(":submit").prop("disabled", true); //Prevent submit to prevent duplicate submissions
            $(this).submit();
        } else { //DONT SEND

        }
    });

每次我填写表单并尝试提交时，我都会在控制台中收到以下错误:

Uncaught RangeError: Maximum call stack size exceeded(…)

我知道发生这种情况的原因有很多，通常是无限循环。谁能看出我在上面的代码中哪里出错了？ .submit() 函数是否再次调用 submit() 方法...如果是这样，我该如何解决这个问题并在验证后发送表单？

为了完全清楚起见，这是我的 isInValid() 和 isValid() 函数。它们用于添加或删除适当的类，以便我可以设置样式根据输入的不同，输入也不同。

//VALID INPUT
    function isValid(input) {
        input.addClass('valid');
        input.removeClass('invalid empty blank');
        input.parent().parent().next('.hint').css('visibility', 'hidden');
    }
    //INVALID INPUT 
    function isInValid(input) {
        input.addClass('invalid');
        input.removeClass('valid empty blank');
        input.parent().parent().next('.hint').css('visibility', 'visible');
    }

Answer 1

通常，您只需要担心在验证逻辑的 if/then 分支中取消表明存在问题的事件。如果您没有遇到这些问题分支，表单将像平常一样提交。这样您就无需手动表明您希望提交表单。

有关详细信息，请参阅下面的内联评论:

$('.enquiry-form-container form').submit(function (e) {
        var invalid = false;
        var isblank = false;
        // Loop through each input and check if valid or empty
        $('.validate').each(function () {
            if ($(this).hasClass('invalid')) {
                isInValid($(this));
                invalid = true;
                e.preventDefault();
                return;
            } else {
                // Any fields are blank
                if ($(this).val() === "") {
                    $(this).addClass('blank');
                    isblank = true;
                    e.preventDefault();
                    return;
                } else {
                    $(this).addClass('valid');
                    isValid($(this));
                    $(this).removeClass('blank empty');
                }
            }
        });

        // If we've gotten this far, the form is good and will be submitted.   

        // No need for an if/then/else here because you've already trapped 
        // the conditions that would prevent the form from being submitted
        // above.

        // Prevent submit to prevent duplicate submissions
        $(this).find(":submit").prop("disabled", true); 
    });

将验证代码分离到其自己的函数中也是一个好主意，因此重新设计的示例如下:

$('.enquiry-form-container form').submit(function (e) {
  // You only need to worry about cancelling the form's submission
  // if the form is invalid:
  if (!validate()) {
    e.preventDefault();
    return;
  }

  // If it is valid, you don't need to interfere in that process, but
  // you can certainly do other "valid" operations:

  // Prevent submit from being clicked to prevent duplicate submissions
  $(this).find(":submit").prop("disabled", true);  
});

function validate() {
  // This function doesn't worry about cancelling the form's submission. 
  // Its only job is to check the elements, style them according to 
  // their validity (and, in a perfect world, the styling would be off-
  // loaded to anther function as well) and return whether the form is 
  // valid or not.

  var invalid = false;
  var isblank = false;

  // Loop through each input and check if valid or empty
  $('.validate').each(function () {
    if ($(this).hasClass('invalid')) {
      isInValid($(this));
      invalid = true;   
    } else {
      // Any fields are blank
      if ($(this).val() === "") {
        $(this).addClass('blank');
          isblank = true;
      } else {
        $(this).addClass('valid');
        isValid($(this));
        $(this).removeClass('blank empty');
      }
    }
  });

  // If invalid or isblank is true, there was a problem and false
  // should be returned from the function
  return !invalid || !isblank;
}