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

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(){&nbsp; &nbsp; const decisionForm = document.querySelectorAll('[name^=decisionOptions]');&nbsp; &nbsp; for (const selector of decisionForm){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; const rejectSelector = selector.parentNode.lastElementChild.previousElementSibling;&nbsp; &nbsp; &nbsp; &nbsp; const formDiv = selector.parentNode&nbsp; &nbsp; &nbsp; &nbsp; const brTag = formDiv.nextElementSibling;&nbsp; &nbsp; &nbsp; &nbsp; const errorMsg = document.createElement('p');&nbsp; &nbsp; &nbsp; &nbsp; errorMsg.className = 'error-msg float-right';&nbsp; &nbsp; &nbsp; &nbsp; errorMsg.innerHTML = 'Please make a selection before submitting';&nbsp; &nbsp; &nbsp; &nbsp; errorMsg.style.color = 'red';&nbsp; &nbsp; &nbsp; &nbsp; if ((selector.value == "shortlist" && selector.checked == false) && (rejectSelector.checked == false)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(`no options selected for application-no${formDiv.dataset.applicationNo}`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formDiv.parentNode.insertBefore(errorMsg, brTag.nextElementSibling);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selector.addEventListener('change', () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (selector.checked){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("remove error message");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; errorMsg.remove()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } catch(err){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(err)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rejectSelector.addEventListener('change', () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (rejectSelector.checked){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("remove error message");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; errorMsg.remove()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } catch(err){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(err)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; }}我不知道它本身是否写得高效，但它确实能完成工作。