JQuery RangeError在表单提交

Question

我有一个表单我正在执行一些自定义验证。这是一段JavaScript处理该最终检查表单提交之前的程序：

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

Answer 2

我认为你的主要问题是调用提交（）从submit的手柄内。更好的方法是在您看到存在无效数据时取消请求。

$('.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 
      return true; 
     } else { //DONT SEND 
      return false; 
     }   
    }); 

Answer 3

我认为你的主要问题是从提交的句柄内部调用submit（）。更好的方法是在您看到存在无效数据时取消请求。

$('.enquiry-form-container form').submit(function (e) { 
    // remove the 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(); // this should be removed 
    } else { //DONT SEND 
      e.preventDefault(); 
    } 
});