Проверка полей ввода, относящихся к пользовательским вкладкам в Javascript

Question

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

Все поля ввода на всех вкладках имеют общую кнопку отправки, так как мне нужно захватить введенные данные и отправить их бэкэнду. Проблема возникает во время проверки внешнего интерфейса, мне нужно проверить поля ввода конкретной вкладки, которая открылась до того, как пользователь отправит форму. На всех закрытых вкладках проверка не должна выполняться.

Разметка

//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');
            $('.familyAge').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');
            $('.coupleAge').css('display' , 'none');
            $('.familyAge').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
        });
    });
}

Answer 1

Перебрать все поля ввода и проверить, не совпадает ли их стиль отображения:

var inputs = document.querySelectorAll("input");
for(let i = 0, max = inputs.length; i < max; i++) {
   if(inputs[i].style.display != "none") {
      //do validation
   }
}