亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

單頁上多個表單的客戶端表單驗證

單頁上多個表單的客戶端表單驗證

千巷貓影 2024-01-18 17:14:05
我在頁面上呈現了多個動態表單。請參閱下面我的代碼片段作為示例。問題是我想確保使用 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>我真的很苦惱如何解決這個問題?,F在,我正在處理這個: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 語句中我指的是同一個選擇器。關于我如何解決這個問題的任何建議。我想確保對于每個申請(每個表格)都選擇入圍或拒絕的選項。如果未進行選擇但用戶嘗試提交表單,我想顯示一個錯誤。
查看完整描述

1 回答

?
哆啦的時光機

TA貢獻1779條經驗 獲得超6個贊

如果有人感興趣,這就是我解決這個問題的方法:


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)

                    }

                }

                

            })

            

        } 


    }

}

我不知道它本身是否寫得高效,但它確實能完成工作。


查看完整回答
反對 回復 2024-01-18
  • 1 回答
  • 0 關注
  • 119 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號