验证与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

循环遍历所有输入字段，并检查它们的样式显示是否等于none：

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