如果验证失败，防止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;
    }
}