jQuery RangeError在表单提交 [英] JQuery RangeError On form submit

问题描述

我有一个要在其上实施一些自定义验证的表格.这是JavaScript的块，用于处理提交表单之前的最终检查:

I have a form I am implementing some custom validation on. This is the block of JavaScript that handles the final check before the form is submitted:

$('.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

        }
    });

每次我填写表格并尝试提交时，控制台中都会出现以下错误:

Each time I fill out the form and attempt to submit I get the following error in the console:

Uncaught RangeError: Maximum call stack size exceeded(…)

我知道，发生这种情况可能有多种原因，通常是无限循环.有人可以在上面的代码中看到我要去哪里吗? .submit()函数是否再次调用submit()方法...如果可以，我如何解决此问题并在验证后发送表格?

I understand that this can happen for a number of reasons, usually an infinite loop. Can anyone see where I am going wrong in the above code? Is the .submit() function calling the submit() method again... If so how can I resolve this and send form if it validates?

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

Just for full clarity, here is my isInValid() and isValid() functions.. They are used to add or remove the appropriate classes so I can style the inputs differently depending on the input.

//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');
    }

推荐答案

通常，您只需要担心在验证逻辑的if/then分支中取消指示问题的事件即可.如果您未点击这些分支，则表单将像往常一样提交.这样就无需您手动指示您要提交表单.

Generally, you just need to worry about cancelling an event in the if/then branches of your validation logic that indicate a problem. If you don't hit those branches, the form submits as it normally would. This removes the need for you to manually indicate that you want the form submitted.

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

See comments inline below for details:

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

将验证代码分成自己的功能也是一个好主意，因此，一个重做的示例将是:

It's also a good idea to separate your validation code into its own function, so a reworked example would be:

$('.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;
}

这篇关于jQuery RangeError在表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！