第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

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

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

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

1 回答

?
哆啦的時光機

TA貢獻1779條經(jīng)驗 獲得超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)

                    }

                }

                

            })

            

        } 


    }

}

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


查看完整回答
反對 回復(fù) 2024-01-18
  • 1 回答
  • 0 關(guān)注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號