如何在表单验证中添加 CSS 类答案

【问题标题】：How add a CSS class on form validation如何在表单验证中添加 CSS 类
【发布时间】：2019-03-21 22:28:13
【问题描述】：

我有一个简单的表单，其中一些输入标记为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>

【问题讨论】：

首先，我认为您需要使用document.querySelectorAll 进行输入...
之后，您可能需要遍历所有输入并检查两件事，而不是使用内置函数检查表单的有效性：（1）是否需要输入，以及（ 2）如果输入有任何内容。如果需要并且没有任何内容，请添加 invalid 类。

标签： javascript forms input

【解决方案1】：

使用 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>

【讨论】：