[英]Client-side form validation for multiple forms on single page
我在一個頁面上顯示了多個動態 forms。 請參閱下面的代碼片段作為示例。 問題是我想確保使用 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>
我真的很掙扎如何解決這個問題。
現在,我正在處理這個:
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 語句中我指的是同一個選擇器。 關於我如何 go 的任何建議。 我想確保為每個申請(每個表格)選擇候選名單或拒絕選項。 如果沒有選擇但用戶嘗試提交表單,我想顯示一個錯誤。
如果有人感興趣,這就是我設法解決的方法:
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)
}
}
})
}
}
}
我不知道它本身是否有效,但它確實可以完成這項工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.