Проверка формы на стороне клиента для нескольких форм на одной странице

У меня есть несколько динамических форм, представленных на странице. Пожалуйста, посмотрите мой фрагмент ниже для примера. Проблема в том, что я хочу убедиться, что значение выбрано в каждой форме с помощью 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 я имею в виду тот же селектор. Любые предложения о том, как я могу это сделать. Я хочу убедиться, что для каждой заявки (каждой формы) выбран вариант выбора или отклонения. Если выбор не сделан, но пользователь пытается отправить форму, я хочу представить ошибку.


javascript validation multiple-forms client-side-validation
person sarchi-xo    schedule 24.12.2020    source источник
comment
вы близки, должны сделать это в vanilla js?   -  person Sudhanshu Kumar    schedule 24.12.2020
comment
@Ashu это не обязательно, но я бы предпочел, чтобы это было в ванильном JS   -  person sarchi-xo    schedule 24.12.2020

Ответы (1)


arrow_upward
0
arrow_downward

Если кому интересно, вот как мне удалось это решить:

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)
                    }
                }
                
            })
            
        } 

    }
}

Я не знаю, эффективно ли он написан сам по себе, но он определенно выполняет свою работу.

person sarchi-xo    schedule 24.12.2020