从父元素的子元素中获取类值

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="[email protected]" 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>

脚本语言

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是父表单，所以你需要像这样获取childrenElements。

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