如果驗證失敗，防止jQuery表單提交

Question

嗨，我正在嘗試通過各種輸入之一驗證失敗時阻止此AJAX提交表單功能。

編輯：我想確切地知道我需要包含在//成人年齡驗證和var handleFormSubmit中，以停止saveForm（$（'＃quotecriteria_form'））; 和performAjaxSubmit（formData，url）; 從發生。

提交功能：

  var handleFormSubmit = function( e ) {
e.preventDefault();

var $submit = $('button[type="submit"]');
$submit.addClass('loading');

// Save the contents of the form to session cookie
saveForm($('#quotecriteria_form'));

var formData = $('#quotecriteria_form').serialize();
var url = $('#quotecriteria_form').attr('action');
performAjaxSubmit(formData, url);
}

驗證功能已初始化：

IndexPageFunctions = {
init: function() {
//Validate date range
this.validateToDate();
this.validateFromDate();
//Validate adult age
this.validateAdultAge0();
this.validateAdultAge1();
this.validateAdultAge2();
this.validateAdultAge3();
//Validate child age
this.validateChildAge0();
this.validateChildAge1();
this.validateChildAge2();
this.validateChildAge3();
this.validateChildAge4();
this.validateChildAge5();
this.validateChildAge6();
this.validateChildAge7();
this.validateChildAge8();
},

眾多驗證功能之一：

//Adult age validation
validateAdultAge0: function() {
    $('button[type="submit"]').on('click', function() {
var inputVal = parseInt( $("input[name='adultAges[0]']").val());
if (inputVal < 18) {
    $("input[name='adultAges[0]']").css("border-color","red");
$("div#under18").addClass('show').removeClass('hidden');
}
        });
},

Answer 1

在所有函數范圍之外定義一個布爾數組，並為每個輸入元素創建一個索引：

var valid = [false,false,false...];

如果應將空白輸入視為無效，則將原始值設置為false；如果該字段為可選，則將其設置為true。 在每個驗證處理程序（例如validateAdultAge0）中，相應地更改相應的標志。 例如，如果您決定將age0的有效性映射到第0個索引，則：

if (inputVal < 18) {
    $("input[name='adultAges[0]']").css("border-color","red");
    $("div#under18").addClass('show').removeClass('hidden');
    valid[0] = false;
}else{
    valid[0] = true;
}

就像評論中指出的人一樣，如果每個函數的邏輯相同，則應該使用一個參數指定目標輸入，而不是創建一個全新的函數，但我在這里不做介紹。

在handleFormSubmit中，您只需要檢查有效數組中的所有標志是否都設置為true，如果任何一個為false，則可以返回：

for(var i=0;i<valid.length;i++){
    if(!valid[i]){
        return;
    }
}