jQuery按钮一次validation表单的一部分

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

1. 我有一个表格，有多个表供用户输入。
2. 我使用next和back按钮来隐藏和显示不同的表格以引导用户。

现在问题是：如何使用next按钮来validation当前活动表输入？ 例如，每次用户单击next ，它将检查是否所有字段都已填满？

这是一个破碎的DEMO 。 谢谢你的评论！

HTML

 
 
 | Chemical |  Crop |  Physical | 

 
 
 
Water Column Half life (days):
 
 
 
 
 
 
Zero Height Reference:
 
 
 
 
 
 
Mass Transfer Coefficient (m/s):
 
 
 
   

JS

 $(document).ready(function() { var tab_pool = ["tab_Chemical", "tab_Crop", "tab_Physical"]; var visible = $(".tab:visible").attr('class').split(" ")[1]; var curr_ind = $.inArray(visible, tab_pool); $(".submit").hide(); $(".back").hide(); $('.next').click(function() { if (curr_ind  0) { $(".tab:visible").hide(); curr_ind = curr_ind - 1; $("." + tab_pool[curr_ind]).show(); $(".submit").hide(); $(".next").show(); } if (curr_ind == 0) { $(".back").hide(); } }); $(".next").click(function() { $(".tab tab_Chemical").validate({ rules: { wat_hl: "required" } }) }) $(".next").click(function() { $(".tab tab_Crop").validate({ rules: { zero_height_ref: "required" } }) }) $(".next").click(function() { $(".tab tab_Physical").validate({ rules: { mas_tras_cof: "required" } }) }) }); 

Answer 1

使用表单添加validation

 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处理程序中

 $('.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(); } }); 

演示： 小提琴

说明

1. var valid = true ：一个标志，用于通过迭代过程保持选项卡的状态
2. $（'input'，tab）.each ：遍历当前选项卡中的每个input元素
3. validator.element（v）validation选项卡中的每个元素
4. valid = validator.element(v) && valid ：更新选项卡的状态

Answer 2

那这个呢 ？

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

Answer 3

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

这个jQuery代码检查特定div中是否有任何错误

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

以下代码将检查特定div中是否有任何错误输入

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

当你想validation整个表单时，只需使用普通代码即可

 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上的源文件
这是一个演示实现

Answer 4

每次单击下一个按钮时，都要为每个表调用validate方法。 相反，您只想在表可见时调用validate。 由于您已经使用curr_ind跟踪哪个表应该可见，因此我建议使用它来了解要validation的表，并且只对可见表调用validate。