简体   繁体   中英

Validating all inputs field of only visible tabs of form

Iam new to Javascript, I have a form divided in 8 tabs, 5 of wich are always visible and 3 only shows on certain conditions and 3 disable from which are visible. I have a save button and when the user clicks on it I need to validate the data in all visible form. but only active tab fields are validate, then i use below script

<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 save button not submit untill all validations are correct its fine,NOW the problem is that its also validate the three tabs are hidden it's included in the validation process.

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

here is my tabs

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

the script for hide and show is

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

and the divs are

    <div class="tab-pane fade active in" id="tab_1_1">
......
...
 <div class="tab-pane fade" id="tab_1_2">
so on

please try this...

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM