Loop through all inner elements of HTML and check if field is required

I’m working on a complex multipage form using HTML, Bootstrap and JavaScript.

What I’m trying to figure out is to validate each section of the multipage form and check if all required fields (if any) are actually valid so that the user can proceed to next section in the form.

The following code snippet is a simplification of my modified form:

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

What is the most efficient way of getting all required fields? For now I’m iterating through each item in the section-1 and get the inner parts to check validity. But using my code below, it will not work on complex nested nodes. How to prevent that?

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

If you just want to check if your form is valid, use checkValidity(). If you want some custom handling, you could try selecting all the possible fields and then loop over them to validate the field individually.

For instance: (this list is not complete)

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

Advertisement

Answer