Как добавить класс 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>