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

jQuery button validate part of a form at a time

提问by TTT

Sorry if I did not explain my problem clearly.

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

1. I have a form with multiple tables for users inputs.
2. I use nextand backbuttons to hide and show different tables in order to guide users.

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

Now the problem is: How do I use nextbutton to validate current active table inputs? For example, every time a user click next, it will check if all the fields are filled?

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

Here is a broken DEMO. Thanks for any comments!

这是一个损坏的DEMO。感谢您的任何评论！

HTML

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

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

回答by Arun P Johny

Add validation using the form

使用表单添加验证

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

Then in the nexthandler

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

Demo: Fiddle

演示：小提琴

Explanation

解释

1. var valid = true: a flag to keep the state of the tab through the iteration process
2. $('input', tab).each: Iterate through each inputs element in the current tab
3. validator.element(v)validate each element in the tab
4. valid = validator.element(v) && valid: update the state of the tab

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

回答by Tom Esterez

What about this ?

那这个呢 ？

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

回答by Dipu Raj

I have an implementation to get this same result. I have added div elements with role="form" parameter. And then validates elements on each div as it is like a form while the main form is still wrapping around.

我有一个实现来获得相同的结果。我添加了带有 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>

And this jQuery code to check if there is any error in a particular div

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

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

The following code will check if there is any error input raised in a particular div

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

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

And when you want to validate the whole form just use the normal code

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

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

Here is the source fileon GitHub
Here is a Demo implemeation

这里是GitHub 上的源文件
Here is a Demo implemeation

回答by Marshmellow1328

You are calling the validate method for each table every time the next button is clicked. Instead, you only want to call validate if the table is visible. Since you are already tracking which table should be visible with your curr_ind, I'd suggest using it to know which table to validate and only calling validate for the visible table.

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