单页上多个表单的客户端表单验证

Question

我在页面上呈现了多个动态表单。请参阅下面我的代码片段作为示例。问题是我想确保使用 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>我真的很苦恼如何解决这个问题。现在，我正在处理这个：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!")        }     }}上面的代码显然不起作用，因为在 if 语句中我指的是同一个选择器。关于我如何解决这个问题的任何建议。我想确保对于每个申请（每个表格）都选择入围或拒绝的选项。如果未进行选择但用户尝试提交表单，我想显示一个错误。

Answer 1

如果有人感兴趣，这就是我解决这个问题的方法：

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)

                    }

                }

                

            })

            

        } 

    }

}

我不知道它本身是否写得高效，但它确实能完成工作。