jQuery按钮一次验证表单的一部分 [英] jQuery button validate part of a form at a time

问题描述

很抱歉，如果我没有清楚地说明我的问题.

Sorry if I did not explain my problem clearly.

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

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

现在的问题是: 如何使用next按钮验证当前活动表输入?例如，每当用户单击next时，它将检查是否所有字段都已填充?

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

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

Here is a broken DEMO. Thanks for any comments!

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

推荐答案

使用表单添加验证

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).每个:遍历当前选项卡中的每个input元素
3. validator.element(v)验证标签中的每个元素
4. valid = validator.element(v) && valid:更新标签页的状态

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

这篇关于jQuery按钮一次验证表单的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！