循环遍历HTML的所有内部元素，并检查是否需要字段

Question

我正在使用HTML、Bootstrap和JavaScript开发一个复杂的多页面表单。

我试图找出的是验证多页表单的每个部分，并检查所有必需字段(如果有的话)是否实际有效，以便用户可以继续到表单中的下一部分。

下面的代码片段是对我修改的表单的简化：

<div class="card">
    <form id="myform">
        <div class="card-body">
             <div class="section-1">
                 <div class="field-1">
                     <fieldset>...</fieldset>
                     <input required id="input-field-1">
                 </div>
                 <div class="field-2">
                     <fieldset>...</fieldset>
                     <select required id="input-field-2">
                 </div>
                 <div class="field-3">
                     <fieldset>...</fieldset>
                     <div class="nested NODE">
                          <input required id="input-field-3">
                     </div>
                 </div>
                 <div class="field-4">
                     <fieldset>...</fieldset>
                     <div class="nested NODE">
                          <div class="really nested NODE">
                               <div class="very big nested NODE">
                                     <input required id="input-field-4">
                               </div>
                          </div>
                     </div>
                 </div>
             </div>
        </div>
    </form>
</div>

获得所有所需字段的最有效方法是什么？现在，我正在迭代第1节中的每一项，并得到内部部分以检查有效性。但是使用下面的代码，它不会在复杂的嵌套节点上工作。如何防止这种情况发生？

function find("required", section_number) {
    let elements = document.getElementById("form_section_" + section_number);
    let children = document.getElementById("form_section_" + section_number).children;
    
    console.log(children);
    
    for(var i=0; i<children.length; i++){
        
        console.log(children[i].childNodes.length);
        if(children[i].childNodes.length == 0){
            
            if (children[i].childNodes.required) {
                console.log('✅ element is required');
            } else {
                console.log('⛔️ element is not required');
            }
            
        }
        else{
            for(var y=0; y<children[i].childNodes.length; y++){
                console.log("inner loop = " + i + ":" + y);             
                if (children[i].childNodes[y].required) {
                    console.log('✅ element is required');
                } else {
                    console.log('⛔️ element is not required');
                }

            }   
        }
    }
    return false;
}

​

​

Answer 1

如果只想检查表单是否有效，请使用checkValidity()。如果您想要进行一些自定义处理，可以尝试选择所有可能的字段，然后遍历它们以单独验证字段。

例如：(此列表不完整)

document.querySelectorAll('input, select, textarea');