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

Question

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

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

Now what i should do? only visible tabs are validate? HELP

这是我的标签

<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

Answer 1

请尝试这个...

     $.validator.setDefaults({ 
       ignore: [],
    // any other default options and/or rules
});