Получение значений класса от дочерних элементов родительского элемента

Question

Части следующего кода взяты из руководства по быстрой проверке формы, которое я нашел на YouTube. Я пытаюсь создать дополнительную функцию для создания сообщения об успешном выполнении внутри функции checkInputs(), если все имена классов formControl = form-control success в функции setSuccessFor(input). Я создал переменную allEl, которая преобразует allElementsNode в массив, но я не могу перебирать ее, чтобы вытащить имена классов дочерних элементов. Итак, [...allElementsNode][0] дает мне доступ к родительскому элементу формы, поэтому я пытаюсь выполнить итерацию по всем дочерним div, чтобы получить значение класса для сравнения, если оно равно form-control success. Если я попытаюсь пройти через allEl, я получу undefined.

HTML

 <form class="form" id="form">
                <div class="form-control">
                    <label>Username</label>
                    <input type="text" placeholder="Angel" id="username">
                    <i class="fa fa-check-circle"></i>
                    <i class="fa fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>
                <div class="form-control">
                    <label>Email</label>
                    <input type="email" placeholder="angel@gmail.com" id="email">
                    <i class="fa fa-check-circle"></i>
                    <i class="fa fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>
                <div class="form-control">
                    <label>Password</label>
                    <input type="password" placeholder="password" id="password">
                    <i class="fa fa-check-circle"></i>
                    <i class="fa fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>
                <div class="form-control">
                    <label>Password check</label>
                    <input type="password" placeholder="Password two" id="password2">
                    <i class="fa fa-check-circle"></i>
                    <i class="fa fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>
                <button>Submit</button>
            </form>

JavaScript

const form = document.querySelector('#form');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const password = document.querySelector('#password');
const password2 = document.querySelector('#password2');
let allElementsNode = document.querySelectorAll("#form");
const allElementsArray = Array.from(allElementsNode);
let formControl;

form.addEventListener('submit', (e) => {
    e.preventDefault();
    checkInputs();
});

function checkInputs() {
    // get values from the inputs
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if (usernameValue === '') {
        // show error
        setErrorFor(username, 'Username cannot be blank');
    } else {
        // show success
        setSuccessFor(username);
    }
    if (emailValue === '') {
        // show error
        setErrorFor(email, 'Email cannot be blank');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, 'Email is not valid')
    } else {
        // show success
        setSuccessFor(email);
    }
    if (passwordValue === '') {
        // show error
        setErrorFor(password, 'Passwords cannot be blank');
    } else {
        // show success
        setSuccessFor(password);
    }
    if (password2Value === '' || password2Value !== passwordValue) {
        // show error
        setErrorFor(password2, 'Passwords cannot be blank and must match!');
    } else {
        // show success
        setSuccessFor(password2);
    }
    // Set success message. All formControl should have the success class set
    // console.log(formControl.className)
    const allEl = [...allElementsNode][0];
    console.log(allEl);
    const allCtrlEl = Array.from(allEl).forEach(item => item);
    console.log(allCtrlEl);
}

function setErrorFor(input, message) {
    formControl = input.parentElement; // .form-control
    const small = formControl.querySelector('small');

    // add error message inside small
    small.innerText = message;
    // add error class
    formControl.className = 'form-control error';
}

function setSuccessFor(input) {
    formControl = input.parentElement; // .form-control
    formControl.className = 'form-control success';
}

function isEmail(email) {
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    return emailPattern.test(email); 
}

Answer 1

Похоже, ваш allElementsNode является родительской формой, поэтому вам нужно получить дочерние элементы, например,

const allEl = [...allElementsNode.children];