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

所有选项卡的所有输入字段共享一个公共的提交按钮，因为我需要捕获输入的数据并提交到后端。 问题出现在后端验证中，我需要验证特定打开的输入字段 用户提交表单时打开的标签（称为“我和孩子”）。此标签包含 用户可以动态选择子项的下拉菜单，例如，如果他选择了2个子项， 会立即显示2个用于捕获日期的输入字段。

我创建了一个已单击的选项卡变量，并将其与对后端的请求一起解析 指示提交时哪个选项卡处于活动状态，因此后端逻辑应执行 仅针对该特定选项卡的输入字段进行验证。

当用户增加或减少子菜单上的子代数时，逻辑操作将按预期工作 下拉菜单。

用户要点击的标签

<ul>
    <li class="columns">
        <div>
            <label"><span>Me & Children</span></label>
        </div>   
    </li>

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

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

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

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


        <!-- ME and Children 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="meChildDropdown">
                        <option selected disabled hidden>Choose here</option>
                        <option value="0"> 0 </option>
                        <option value="1"> 1 </option>
                        <option value="1"> 2 </option>
                        <option value="1"> 3 </option>
                    </select>
                    </div>
            </div>
        </div>
        <!--1st Child DOB-->
        <div class="row mt-5" style="display: none;" id="meChildDob1">
            <div class="col-6 offset-3">
            <h1 class="digital__major_title text-center">1st Child Date Of Birth</h1>
            <div class="form-group">
                <input type="text" class="form-control" id="meAndChild1" placeholder="DD-MM-YYYY" value=""> 
            </div>
        </div>
        </div>
        <!--2nd Child DOB-->
        <div class="row mt-5" style="display: none;" id="meChildDob2">
            <div class="col-6 offset-3">
            <h1 class="digital__major_title text-center">2nd Child Date Of Birth</h1>
            <div class="form-group">
                <input type="text" class="form-control" id="meAndChild2" placeholder="DD-MM-YYYY" value=""> 
            </div>
        </div>
        </div>
        <!--3rd Child DOB-->
        <div class="row mt-5" style="display: none;" id="meChildDob3">
            <div class="col-6 offset-3">
            <h1 class="digital__major_title text-center">3rd Child Date Of Birth</h1>
            <div class="form-group">
                <input type="text"  class="form-control" id="meAndChild3" placeholder="DD-MM-YYYY" value=""> 
            </div>
        </div>
        </div>
        <!--END ME AND CHILDREN 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>

根据“我和孩子”标签中的选择下拉列表显示孩子日期字段

$(function(){
    $("#meChildDropdown").change(function(){
        let child = this.value;
        // alert(child);
        if(child == "1"){
            $('#meChildDob1').css('display','block');
            $('#meChildDob2').css('display','none');
            $('#meChildDob3').css('display','none');
        }
        else if(child == "2"){
            $('#meChildDob1').css('display','block');
            $('#meChildDob3').css('display','none');
        }
        else if(child == "3"){
            $('#meChildDob1').css('display','block');
        }
        else{
            $('#meChildDob1').css('display','none');
            $('#meChildDob2').css('display','none');
        }
    });
});

检查选项卡单击并有条件地显示相应输入的逻辑

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

AJAX提交表单的请求

$("#travellerDetail").submit(function( event ) {
    event.preventDefault();

    //Children DOBs - Me and Children Tab if empty make it undefined otherwise
    //pick value
    let meAndChild1 = $('#meAndChild1').val() == '' ? undefined : $('#meAndChild1').val();
    let meAndChild2 = $('#meAndChild2').val() == '' ? undefined : $('#meAndChild2').val();
    let meAndChild3 = $('#meAndChild3').val() == '' ? undefined : $('#meAndChild3').val();

    //Capture value from dropdown of selected child,if empty make it undefined otherwise
    //pick value
    let meAndChildNumber = $('#meChildDropdown').val() == '' ? undefined : $('#meChildDropdown').val();

    var type ={
        //Send the value of clicked tab
        'traveller' : value,//Dropdown list value
        'meAndChildNumber' : meAndChildNumber,//Dates of all captured children
        'meAndChild1' : meAndChild1,'meAndChild2' : meAndChild2,'meAndChild3' : meAndChild3
    };

    $.ajax({
        type: 'POST',url: 'submitTravellers',data: JSON.stringify(type),contentType: 'application/json',dataType: "json",cache: false,success: function success(response) {
            //console.log('success');
        }
    });
});

后端验证逻辑

 public function submitTravellers(Request $request){
    //dd($request->all());

    //if the clicked tab on the U.I was me and children
    if($request->traveller == 'meAndChildren'){

        //dd($request->meAndChildNumber);

        $response = [];

        //If the dropdown is equal to 1 and 1st child dob is not empty
        if($request->meAndChildNumber == 1){
            if(!isset($request->meAndChild1)){
                $response = [
                    'Child1' => 'Please Insert a valid child one date of birth'
                ];
            }
        }

        //If the dropdown is equal to 2 and 1st child,2nd child dob is not empty
        if($request->meAndChildNumber == 2){
            if(!isset($request->meAndChild1) && !isset($request->meAndChild2)){
                $response = [
                    'Child1' => 'Please Insert a valid child one date of birth','Child2' => 'Please Insert a valid child two date of birth'
                ];
            }
        }

        //If the dropdown is equal to 3 and 1st child,2nd child,3rd child dob is not empty
        if($request->meAndChildNumber == 3){
            if(!isset($request->meAndChild1) && !isset($request->meAndChild2) && !isset($request->meAndChild3)){
                $response = [
                    'Child1' => 'Please Insert a valid child one date of birth','Child2' => 'Please Insert a valid child two date of birth','Child3' => 'Please Insert a valid child three date of birth'
                ];
            }
        }

        dd($response);
    }
}