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