如果验证失败，阻止 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 中，您只需要检查有效数组中的所有标志是否都设置为真，如果任何一个为假，您可以 return:

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

如果验证失败，阻止 jQuery 表单提交

prevent jQuery form submit if validation fail

javascript

forms

ajax

jquery