javascript - 如何在表单验证中添加 CSS 类
问题描述
我有一个简单的表单,其中一些输入标有required
,如何添加类invalid
或valid
在有效或无效的特定输入中?
只有 1 个输入接收invalid
类。
const $input = document.querySelector("input")
const $form = document.querySelector("#form")
const $button = document.querySelector("#button")
$button.addEventListener('click', () => validate())
const validate = () => {
if (!$form.checkValidity()) {
console.log('invalid')
$input.classList.add('invalid')
} else {
console.log('valid')
$input.classList.add('valid')
}
}
input.invalid {
background: red;
}
input.valid {
background: green;
}
<form id="form">
<input class="input" type="text" placeholder="Name" name="nome" required>
<input class="input" type="number" placeholder="Number" name="number">
<input class="input" type="number" placeholder="Size" name="size" required>
<input class="input" type="checkbox" name="blue">
<input class="input" type="checkbox" name="red">
</form>
<button id="button">Submit</button>
解决方案
使用 querySelectorAll
const $input = document.querySelectorAll("input")
const $form = document.querySelector("#form")
const $button = document.querySelector("#button")
$button.addEventListener('click', () => validate())
const validate = () => {
if (!$form.checkValidity()) {
console.log('invalid')
$input.forEach(input => input.classList.add('invalid'));
} else {
console.log('valid')
$input.forEach(input => input.classList.add('valid''));
}
}
input.invalid {
background: red;
}
input.valid {
background: green;
}
<form id="form">
<input class="input" type="text" placeholder="Name" name="nome" required>
<input class="input" type="number" placeholder="Number" name="number">
<input class="input" type="number" placeholder="Size" name="size" required>
<input class="input" type="checkbox" name="blue">
<input class="input" type="checkbox" name="red">
</form>
<button id="button">Submit</button>
推荐阅读
- jquery - Scroll div on click
- c++ - Get C++ RTTI as enum for dispatch in switch statement
- amazon-web-services - SQS 短轮询比长轮询更可取吗?
- java - Java+Kotlin Android 项目中 Kotlin 文件中未解决的引用错误
- android - 使用 FileProvider 使用相机捕获图像,如何存储 uri
- java - How do assert one list in another list with same order
- virtualscroll - ionic 4虚拟滚动不起作用
- python - flask_restful 导入资源错误
- watson-conversation - 如何通过 Watson Assistant API 动态检索响应类型
- angular - 嵌套 in-memory-web-api 即更长的 uri