我正在开发具有一些自定义选项卡的应用程序。当用户 单击每个选项卡，将自动显示与该选项卡相关的输入字段。 当用户通过单击另一个选项卡进行更改时，上一个选项卡的输入字段将被隐藏 和单击的选项卡的那些将自动显示。这种逻辑工作正常。

所有标签的所有输入字段共享一个共同的提交按钮，因为我需要捕获 输入的数据并提交给后端。在前端验证期间出现问题，我需要 在用户提交表单之前，请验证已打开的特定选项卡的输入字段。 在所有关闭的选项卡上，都不应进行验证。

标记

//Tabs to be clicked by user
<ul>
    <li class="columns">
        <div>
            <label"><span>Just Me or My Spouse</span></label>
        </div>   
    </li>

    <li class="columns">
        <div>
            <label"><span>Couple</span></label>
        </div>   
    </li>

    <li class="columns">
        <div>
            <label"><span>My Family</span></label>
        </div>   
    </li>
</ul>

根据点击的标签有条件显示的字段

<form method="POST" action="#" id="travellerDetail" novalidate>

        <!-- JUST ME OR SPOUSE TAB FIELD-->
        <hr class="row travellerAge" style="display: none;">
        <div class="row travellerAge" style="display: none;">
            <div>
                <h1>Age of the Traveller</h1>
                <p>Select your Age from the datepicker below?</p>
                <div class="form-group">
                    <input type="text" class="form-control" id="justMeDob" placeholder="DD-MM-YYYY" value="" required> 
                </div>
            </div>
        </div>
        <!--END-->

        <!-- COUPLE AGE TAB FIELDS-->
        <hr class="row coupleAge" style="display: none;">
        <div class="row coupleAge" style="display: none;">
            <div class="col-6 offset-3 text-center">
                    <h1>Husband Age</h1>
                    <p>Select Husband age from the datepicker below?</p>
                    <div class="form-group">
                        <input type="text" id="coupleHusbandAge" class="form-control" placeholder="DD-MM-YYYY" value="" required>  
                    </div>
            </div>
        </div>
        <div class="row coupleAge" style="display: none;">
            <div class="col-6 offset-3 text-center">
                <h1>Wife Age</h1>
                <p>Select Wife age from the datepicker below?</p>
                <div class="form-group">
                    <input type="text" id="coupleWifeAge" class="form-control" placeholder="DD-MM-YYYY" value="" required>  
                </div>
            </div>
        </div>
        <!--END COUPLE AGE TAB FIELDS-->


        <!-- MY FAMILY TAB FIELDS-->
        <hr class="row mt-5 familyAge" style="display: none;">
        <div class="row familyAge mt-5" style="display: none;">
            <div class="col-6 offset-3 text-center">
                    <h1>Spouse Age</h1>
                    <p>Select Spouse age from the datepicker below?</p>
                    <div class="form-group">
                    <input type="text" class="form-control" id="myFamilySpouseAge" placeholder="DD-MM-YYYY" value="" required>  
                    </div>
            </div>
        </div>

        <div class="row familyAge" style="display: none;">
            <div class="col-6 offset-3 text-center">
                    <h1>Children</h1>
                    <p>Select Number of Children you are travelling with?</p>
                    <div class="form-group">
                    <select class="form-control otherMenu wide" id="myFamilyChildSelect">
                        <option selected disabled hidden>Choose here</option>
                        <option value="0"> 0 </option>
                        <option value="1"> 1 </option>
                    </select>
                    </div>
            </div>
        </div>
        <!--END MYFAMILY TAB FIELDS-->


        <div class="row">
            <div class="col-6">
                <button> Back </button>
            </div>
            <div class="col-6">
                <button name="submit" type="submit" id="submitPhase2"> Next </button>
            </div>
        </div>
</form>

我的逻辑以选中选项卡并有条件地显示相应的输入

let traveller = false;
let value = "";
$(".columns").click(function () {
    if (!traveller) {
        //Check the text that was clicked
        var person = $(this).text();
        if(person.trim() == "Just Me or My Spouse"){
            //Show Individual input and hide others
            $('.travellerAge').fadeIn(1000);
            $('.coupleAge').css('display','none');
            $('.familyAge').css('display','none');
            value = 'justMeOrSpouse';
        }
        if(person.trim() == "Couple"){
            //Show Couple inputs and hide others
            $('.coupleAge').fadeIn(1000);
            $('.travellerAge').css('display','none');
            value = 'couple';
        }
        if(person.trim() == "Family"){
            //Show Family inputs and hide others
            $('.familyAge').fadeIn(1000);
            $('.travellerAge').css('display','none');
            $('.coupleAge').css('display','none');
            value = 'myFamily';
        }
        else{
            $('.travellerAge').css('display','none');
        }
    }
});

根据上面逻辑中的值变量提交数据

if(value == "couple"){
    coupleLogic();
}

if(value = "myFamily"){
    myFamilyLogic();
}
//END

上面调用的逻辑的实际功能

function coupleLogic(){
    $("#travellerDetail").submit(function( event ) {
        event.preventDefault();
        //perform validation
        $.ajax({
            //Submit via AJAX
        });
    });
}


function  myFamilyLogic(){
    $("#travellerDetail").submit(function( event ) {
        event.preventDefault();
        //perform validation
        $.ajax({
            //Submit via AJAX
        });
    });
}