Javascript jQuery按钮一次验证表单的一部分

对不起，如果我没有解释清楚我的问题

我有一个表单，有多个表格供用户输入

我使用

next

和

back

按钮隐藏和显示不同的表，以指导用户

现在的问题是： 如何使用

next

按钮验证当前活动表输入？例如，每次用户单击“下一步”，它都会检查所有字段是否已填充

这是一个坏的。谢谢你的评论

HTML

||
|
|


水柱半衰期（天）：
零高度基准：
传质系数（m/s）：

JS

$（文档）.ready（函数（）{
var tab_池=[“tab_化学”、“tab_作物”、“tab_物理”]；
var visible=$（“.tab:visible”）.attr（'class'）.split（“”[1]；
var curr\u ind=$.inArray（可见，选项卡池）；
$（“.submit”）.hide（）；
$（“.back”）.hide（）；
$（'.next'）。单击（函数（）{
如果（电流指数<2）{
$（“.tab:可见”）.hide（）；
当前索引=当前索引+1；
$（“+tab_pool[curr_ind]）.show（）；
$（“.submit”）.hide（）；
$（“.back”）.show（）；
}
if（curr_ind==2）{
$（“.submit”）.show（）；
$（“.next”）.hide（）；
}
});
$（'.back'）。单击（函数（）{
如果（当前索引>0）{
$（“.tab:可见”）.hide（）；
curr_ind=curr_ind-1；
$（“+tab_pool[curr_ind]）.show（）；
$（“.submit”）.hide（）；
$（“.next”）.show（）；
}
if（curr_ind==0）{
$（“.back”）.hide（）；
}
});
$（“.next”）。单击（函数（）{
$（“.tab tab_Chemical”）。验证({
规则：{
wat_hl：“必需”
}
})
})
$（“.next”）。单击（函数（）{
$（“.tab选项卡_裁剪”）。验证({
规则：{
零高度参考：“必需”
}
})
})
$（“.next”）。单击（函数（）{
$（“.tab tab_Physical”）。验证({
规则：{
mas_tras_cof：“必需”
}
})
})
});

每次单击“下一步”按钮时，您都在为每个表调用validate方法。相反，您只希望在表可见时调用validate。由于您已经在跟踪哪一个表应该在您的curr\u ind中可见，因此我建议使用它来知道要验证哪一个表，并且只为可见表调用validate。

使用表单添加验证

var validator = $('form').validate({
    ignore: 'input[type="button"],input[type="submit"]',
    rules: {
        wat_hl: {
            required: true
        },
        zero_height_ref: {
            required : true
        },
        mas_tras_cof: {
            required: true
        }
    }
});

然后在

下一个
处理程序中

$('.next').click(function () {
    var tab = $(".tab:visible");

    var valid = true;
    $('input', tab).each(function(i, v){
        valid = validator.element(v) && valid;
    });

    if(!valid){
        return;
    }

    if (curr_ind < 2) {
        $(".tab:visible").hide();
        curr_ind = curr_ind + 1;
        $("." + tab_pool[curr_ind]).show();
        $(".submit").hide();
        $(".back").show();
    }
    if (curr_ind == 2) {
        $(".submit").show();
        $(".next").hide();
    }
});

$（'.next'）。单击（函数（）{
var tab=$（“.tab:可见”）；
var valid=true；
$（“输入”，选项卡）。每个（函数（i，v）{
valid=验证器。元素（v）和&valid；
});
如果（！有效）{
返回；
}
如果（电流指数<2）{
$（“.tab:可见”）.hide（）；
当前索引=当前索引+1；
$（“+tab_pool[curr_ind]）.show（）；
$（“.submit”）.hide（）；
$（“.back”）.show（）；
}
if（curr_ind==2）{
$（“.submit”）.show（）；
$（“.next”）.hide（）；
}
});

演示：

解释

var valid=true
：在迭代过程中保持选项卡状态的标志
：遍历当前选项卡中的每个输入元素
验证选项卡中的每个元素
valid=validator.element（v）和&valid
：更新选项卡的状态
这个怎么样

var isOpenedTabValid = $(".tab:visible :input").valid();

我有一个实现来获得相同的结果。我添加了带有role=“form”参数的div元素。然后验证每个div上的元素，因为它就像一个表单，而主表单仍在包装

<form action="#" id="myForm" role="form" data-toggle="validator" method="post">

    <div id="form-step-0" role="form" data-toggle="validator"><!-- Input elemets --></div>
    <div id="form-step-1" role="form" data-toggle="validator"><!-- Input elemets --></div>
    <div id="form-step-2" role="form" data-toggle="validator"><!-- Input elemets --></div>

</form>

下面的代码将检查特定div中是否出现任何错误输入

var elmForm = $("#form-step-0");
elmForm.validator('validate'); 

var elmErr = elmForm.children('.has-error');
if(elmErr && elmErr.length > 0){
    // Error elements found, Form validation failed
    return false;    
}

当您想要验证整个表单时，只需使用普通代码

var elmForm = $("#myForm");
elmForm.validator('validate'); 
var elmErr = elmForm.find('.has-error');
if(elmErr && elmErr.length > 0){
    alert('Oops we still have error in the form');
    return false;    
}else{
    alert('Great! we are ready to submit form');
    elmForm.submit();
    return false;
}                

这是GitHub上的应用程序

这里有一个
我不确定我今晚是否有雄心承担这项任务，但我认为有两种方法可以实现。在“下一步”按钮上更改/附加类以将其链接到相应的.tab进行验证，或者在验证之前检查每个选项卡的显示属性。@isherwood:谢谢您的回复。只要我可以使用jQuery验证插件，任何一种方法都可以工作，因为我需要为其他类型的输入添加一些方法。下面是我思考的开始：注意所有的.next click函数都在一起。这一个使用了更好的逻辑并修复了表类选择器：我同意你的建议。我尝试使用$（'.table class'）.validate（）方法，但失败了。但是，一旦我将其更改为$（'#form ID'）.validate（），一切正常…调用
validate（）
初始化表单上的插件。然后调用
valid（）
测试有效性。非常感谢！你能解释一下`$（'input'，tab.）每个（函数（i，v）{valid=validator.element（v）&&valid；}）`有一点？@tao.hong添加了一些解释，让我知道它是否足够，所以没有使用索引
i
？抱歉问了你最后一个问题。
$（'input'，tab）
和
$（'input'）
之间有什么区别？谢谢！实际上，这比循环输入要容易一些。您可以使用
var valid=$（'input'，tab）.valid（）感谢您提供解决方案。感谢您证明此解决方案！
var elmErr = elmForm.children('.has-error');
if(elmErr && elmErr.length > 0){
    // Error elements found, Form validation failed
    return false;    
}

var elmForm = $("#myForm");
elmForm.validator('validate'); 
var elmErr = elmForm.find('.has-error');
if(elmErr && elmErr.length > 0){
    alert('Oops we still have error in the form');
    return false;    
}else{
    alert('Great! we are ready to submit form');
    elmForm.submit();
    return false;
}