Question

很抱歉，如果我没有清楚地解释我的问题。

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

现在的问题是：如何使用next按钮验证当前活动表输入？例如，每次用户点击next时，都会检查是否所有字段都已填满？

这是一个破碎的DEMO。感谢您的任何评论！

HTML

<form method="post" id="form1" action=index.html>
    <table>
        <H4 align="center" id="id_tab">
            |<a href="#" class="Chemical"> Chemical </a>|
             <a href="#" class="Crop"> Crop </a>|
             <a href="#" class="Physical"> Physical </a>|
            </H4>
    </table><br>
    <table class="tab tab_Chemical" border="0">
        <tr>
            <th><label for="id_wat_hl">Water Column Half life (days):</label></th>
            <td><input type="text" name="wat_hl" id="id_wat_hl" /></td>
        </tr>
    </table>
    <table class="tab tab_Crop" border="0" style="display:none">
        <tr>
            <th><label for="id_zero_height_ref">Zero Height Reference:</label></th>
            <td><input type="text" name="zero_height_ref" id="id_zero_height_ref" /></td>
        </tr>
    </table>
    <table class="tab tab_Physical" border="0" style="display:none">
        <tr>
            <th><label for="id_mas_tras_cof">Mass Transfer Coefficient (m/s):</label></th>
            <td><input type="text" name="mas_tras_cof" id="id_mas_tras_cof" /></td>
        </tr>
    </table>
    <table align="center">
        <tr>
            <td><input class="back" type="button" value="Back" /></td>
            <td><input class="next" type="button" value="Next" /></td>
            <td><input class="submit" type="submit" value="Submit" /></td>
        </tr>
    </table>
</form>

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

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

使用表单

添加验证

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

演示：Fiddle

解释

var valid = true：通过迭代过程保持选项卡状态的标志
$('input', tab).each：遍历当前标签中的每个输入元素
validator.element(v)验证标签中的每个元素
valid = validator.element(v) && valid：更新标签页的状态

Answer 2

这个怎么样？

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

Answer 3

我有一个实现来获得相同的结果。我添加了带有role =＆＃34; form＆＃34;的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>

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

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

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上的source file 这是Demo implemeation

Answer 4

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

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

HTML

JS

4 个答案: