验证表单中仅可见选项卡的所有输入字段

问题描述 投票:0回答:1

我是 JavaScript 新手,我有一个表单,分为 8 个选项卡,其中 5 个选项卡始终可见,3 个选项卡仅在某些条件下显示,3 个选项卡禁用,其中可见。我有一个保存按钮,当用户单击它时,我需要以所有可见形式验证数据。 但只有活动选项卡字段有效,然后我使用下面的脚本

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

<script>
    $.validator.setDefaults({
        ignore: ""
    });

现在保存按钮不会提交,直到所有验证都正确为止,这很好,现在的问题是它还验证了三个选项卡是否隐藏,它包含在验证过程中。

现在我应该做什么?只有可见的选项卡才有效?帮助

这是我的标签

<ul class="nav nav-tabs fixedWidth">
    <li class="active">
        <a href="#tab_1_1" data-toggle="tab" id="ind">
            Customer Details for Individual
        </a>
    </li>
    <li>
        <a href="#tab_1_2" data-toggle="tab" id="business">
            Customer Details for Business
        </a>
    </li>
    <li>
        <a href="#tab_1_3" data-toggle="tab">
            Identification Information
        </a>
    </li>
    <li>
        <a href="#tab_1_4" data-toggle="tab">
            Contact Details
        </a>
    </li>
    <li>
        <a href="#tab_1_5" data-toggle="tab" id="ind1">
            Joint Applicant Details
        </a>
    </li>
    <li>
        <a href="#tab_1_6" data-toggle="tab" id="ind2">
            Customer Due Diligence
        </a>
    </li>
    <li>
        <a href="#tab_1_7" data-toggle="tab" id="business1">
            Customer Due Diligence (Business)
        </a>
    </li>
    <li>
        <a href="#tab_1_8" data-toggle="tab">
            Other Informations
        </a>
    </li>

</ul>

隐藏和显示的脚本是

  $(document).ready(function () {
        $('#INDUSTRY_ID').on('change', function () {
            if (this.value == '41') {
                $("#ind").show();
                $("#ind1").show();
                $("#ind2").show();
                document.getElementById("ind").click();
               
             
                $("#business").hide()
                $("#business1").hide();
            }
            else {

                $("#business").show();
                $("#business1").show();
                document.getElementById("business").click();
                $("#ind").hide();
                $("#ind1").hide();
                $("#ind2").hide();
            }
        });
    });

div 是

    <div class="tab-pane fade active in" id="tab_1_1">
......
...
 <div class="tab-pane fade" id="tab_1_2">
so on
javascript jquery validation
1个回答
0
投票

请尝试这个...

     $.validator.setDefaults({ 
       ignore: [],
    // any other default options and/or rules
});
© www.soinside.com 2019 - 2024. All rights reserved.