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

Question

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

Answer 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>