Проверка полей ввода пользовательских вкладок в зависимости от раскрывающегося списка в Laravel

Question

Я работаю над приложением, которое имеет несколько пользовательских вкладок. Когда пользователь нажимает на каждую вкладку, поля ввода, относящиеся к вкладке, отображаются автоматически. Когда пользователь меняет свой выбор, щелкая другую вкладку, поля ввода предыдущей вкладки скрываются, а поля выбранной вкладки отображаются автоматически. Эта логика работает нормально.

Все поля ввода на всех вкладках имеют общую кнопку отправки, так как мне нужно захватить введенные данные и отправить их бэкэнду. Проблема возникает в проверке бэкэнда, мне нужно проверить поля ввода определенной открытой вкладки (называемой «Я и дети»), которая открывается, когда пользователь отправляет форму. Эта вкладка содержит раскрывающийся список, в котором пользователь может динамически выбирать дочерние элементы, например, если он выбирает 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');
            $('#meChildDob2').css('display' , 'block');
            $('#meChildDob3').css('display' , 'none');
        }
        else if(child == "3"){
            $('#meChildDob1').css('display' , 'block');
            $('#meChildDob2').css('display' , 'block');
            $('#meChildDob3').css('display' , 'block');
        }
        else{
            $('#meChildDob1').css('display' , 'none');
            $('#meChildDob2').css('display' , 'none');
            $('#meChildDob3').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');
            $('.familyAge').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);
    }
}