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

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

1 个答案: