防止在验证失败时提交 jQuery 表单

prevent jQuery form submit if validation fail

本文关键字：提交 jQuery 表单 失败 验证      更新时间：2023-09-26

嗨，当验证在各种输入之一上失败时，我正在尝试阻止此 AJAX 提交表单函数。

编辑：我想知道的确切是我需要包含在//Adult age validation 和 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');
}
        });
},

在所有函数的作用域之外定义一个布尔数组，每个输入元素都有一个索引：

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，如果任何一个是假的，你可以返回：

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