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

jQuery button validate part of a form at a time

本文关键字：验证 表单 一部分 一次 按钮 jQuery      更新时间：2023-09-26

很抱歉我没有解释清楚我的问题。

  1. 我有一个表单与多个表的用户输入。
  2. 我使用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"
            }
        })
    })
});

使用表单

添加验证
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. $("输入"选项卡)。each:遍历当前选项卡
    3. 中的每个输入元素
  3. validator.element(v)验证标签
    4. 中的每个元素
  4. valid = validator.element(v) && valid:更新标签
    5. 的状态

这个怎么样?

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

我有一个实现来获得相同的结果。我添加了div元素的角色="form"参数。然后验证每个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上的源文件
下面是一个Demo实现

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

相关文章：