Client-side form validation for multiple forms on single page

Question

I have multiple dynamic forms being presented on a page. Please see my snippet below for an example. The problem is I want to make sure a value is selected in each form using JavaScript.

 <div class="form-check form-check-inline float-right" data-application-no="1"> <input type="radio" class="form-check-input" id="shortlist" name="decisionOptions1" value="shortlist"> <label for="shortlist" class="form-check-label mr-3">Shortlist</label> <input type="radio" class="form-check-input" id="reject" name="decisionOptions1" value="reject"> <label for="reject" class="form-check-label">Reject</label> </div> <div class="form-check form-check-inline float-right" data-application-no="2"> <input type="radio" class="form-check-input" id="shortlist" name="decisionOptions2" value="shortlist"> <label for="shortlist" class="form-check-label mr-3">Shortlist</label> <input type="radio" class="form-check-input" id="reject" name="decisionOptions2" value="reject"> <label for="reject" class="form-check-label">Reject</label> </div> <div class="form-check form-check-inline float-right" data-application-no="3"> <input type="radio" class="form-check-input" id="shortlist" name="decisionOptions3" value="shortlist"> <label for="shortlist" class="form-check-label mr-3">Shortlist</label> <input type="radio" class="form-check-input" id="reject" name="decisionOptions3" value="reject"> <label for="reject" class="form-check-label">Reject</label> </div>

I am really struggling on how to go about this.

Right now, I'm working with this:

function submitDecision(){

    const decisionForm = document.querySelectorAll('[name^=decisionOptions]');
    const shortlistSelector = document.querySelectorAll('#shortlist');
    const rejectSelector = document.querySelectorAll('#reject');


    for (const selector of decisionForm){
        console.log(`${selector.name}: ${selector.value} , ${selector.checked}`);
        if ((selector.value == "shortlist" && selector.checked == false) && (selector.value == "reject" && selector.checked == false)){
       console.log("we have a problem!")
        }
     }
}

The code above isn't working though obviously because in that if statement I am referring to the same selector. Any suggestions on how I can go about this. I want to make sure that for each application (each form) an option of shortlist or reject is chosen. If no selection is made but the user tries to submit the form, I want to present an error.

Answer 1

In case anyone is interested, this is how I managed to solve it:

function submitDecision(){

    const decisionForm = document.querySelectorAll('[name^=decisionOptions]');


    for (const selector of decisionForm){
        
        const rejectSelector = selector.parentNode.lastElementChild.previousElementSibling;
        const formDiv = selector.parentNode
        const brTag = formDiv.nextElementSibling;
        const errorMsg = document.createElement('p');
        errorMsg.className = 'error-msg float-right';
        errorMsg.innerHTML = 'Please make a selection before submitting';
        errorMsg.style.color = 'red';
        if ((selector.value == "shortlist" && selector.checked == false) && (rejectSelector.checked == false)){
            console.log(`no options selected for application-no${formDiv.dataset.applicationNo}`);
            formDiv.parentNode.insertBefore(errorMsg, brTag.nextElementSibling);
            selector.addEventListener('change', () => {
                if (selector.checked){
                    console.log("remove error message");
                    try {
                        errorMsg.remove()
                    } catch(err){
                        console.log(err)
                    }
                }
            })
            rejectSelector.addEventListener('change', () => {
                if (rejectSelector.checked){
                    console.log("remove error message"); 
                    try {
                        errorMsg.remove()
                    } catch(err){
                        console.log(err)
                    }
                }
                
            })
            
        } 

    }
}

I don't know if it is efficiently written per se but it definitely does the job.