javascript - 从父元素的子元素获取类值
问题描述
以下部分代码来自我在 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);
}
解决方案
看起来您的 allElementsNode 是父表单,因此您需要像这样获取 childrenElements
const allEl = [...allElementsNode.children];
推荐阅读
- sql-server - SSRS - 从 SQL 视图运行多个相关参数。将 RS 保存在内存中
- c++ - C ++返回字符串或不带自动的int
- azure - Azure - 如何在订阅级别查找权限?
- r - MASS::stepAIC - 分配给 step 函数参数
- php - php 丢失 curl 句柄参考
- hsm - 客户选择的 PIN 的 HSM PIN 命令
- docker - 如何从 docker 容器内部向该容器的外部主机名/端口发送请求?
- matlab - 用 MatLab 求解这个微分方程组
- c++ - 两个 std::vector 读取访问冲突的联合
- excel - 如果列包含非数字字段,如何创建错误消息 - VBA