Валидация чекбокса

Question

Как сделать проверку на несколько чекбоксов, что если хотя бы один отмечен то форма отправляется? Первая проверка идёт по сабмиту если отправляем пустую форму, вторая по чекбоксам, если один выбран то убираем ошибку. Один чекбокс должен быть обязательным. Запутался совсем...

const checkboxWrapper = document.querySelector("form");
const checkbox = document.querySelectorAll("[data-checkbox]");
const error = document.querySelector("[data-error]");

checkboxWrapper.addEventListener("submit", (evt) => {
  evt.preventDefault();
  
  checkbox.forEach((input, i) => {
    if (checkbox[i].checked && checkbox[i].checked > 0) {
      error.textContent = ""
    } else {
      error.textContent = "Ошибка"
    }
  });
});

checkbox.forEach((input, i) => {
  checkbox[i].addEventListener("change", () => {
    if (checkbox[i].checked) {
      error.textContent = ""
    } else {
      error.textContent = "Ошибка"
    }
  })
});

form {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}

<form action="#">
  <div>
    <input class="checkbox" type="checkbox" id="check-1" data-checkbox="">
    <label for="check-1">Checkbox 1</label>
  </div>
  <div>
    <input class="checkbox" type="checkbox" id="check-2" data-checkbox="">
    <label for="check-2">Checkbox 2</label>
  </div>
  <div>
    <input class="checkbox" type="checkbox" id="check-3" data-checkbox="">
    <label for="check-3">Checkbox 3</label>
  </div>
  <div>
    <input class="checkbox" type="checkbox" id="check-4" data-checkbox="">
    <label for="check-4">Checkbox 4</label>
  </div>
  <span data-error=""></span>
  <button type="submit">Отправить</button>
</form>

Answer 1

Заводим флаг
Устанавливаем его в false
Пробегаем по списку чекбоксов
Как только нашли включенный чекбокс, флаг переводим в true
После цикла проверяем флаг и производим действие

Ну и всю проверку лучше вынести в отдельную функцию, чтобы вызывать ее из разных мест.

const checkboxWrapper = document.querySelector("form");
const checkbox = document.querySelectorAll("[data-checkbox]");
const error = document.querySelector("[data-error]");

function testCheckboxes() {
  let checked = false;
  checkbox.forEach((input) => {
    if (input.checked)
      checked = true;
  });
  if (checked) {
    error.textContent = ""
  } else {
    error.textContent = "Ошибка"
  }
  return checked;
}

checkboxWrapper.addEventListener("submit", (evt) => {
  evt.preventDefault();
  testCheckboxes();
});

checkbox.forEach((input) => {
  input.addEventListener("change", (evt) => {
    testCheckboxes();
  });
});

form {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}

<form action="#">
  <div>
    <input class="checkbox" type="checkbox" id="check-1" data-checkbox="">
    <label for="check-1">Checkbox 1</label>
  </div>
  <div>
    <input class="checkbox" type="checkbox" id="check-2" data-checkbox="">
    <label for="check-2">Checkbox 2</label>
  </div>
  <div>
    <input class="checkbox" type="checkbox" id="check-3" data-checkbox="">
    <label for="check-3">Checkbox 3</label>
  </div>
  <div>
    <input class="checkbox" type="checkbox" id="check-4" data-checkbox="">
    <label for="check-4">Checkbox 4</label>
  </div>
  <span data-error=""></span>
  <button type="submit">Отправить</button>
</form>

Answer 2

Просто проверяем количество отмеченных checkbox в форме и, на основании этого, показываем/скрываем предупреждение:

const checkboxWrapper = document.querySelector('form');
const checkbox = [...document.querySelectorAll('[data-checkbox]')];
const error = document.querySelector('[data-error]');

checkboxWrapper.addEventListener('submit', (evt) => {
  evt.preventDefault();
  invalid();
});

checkbox.forEach((input) => {
  input.addEventListener('change', invalid);
});

function invalid() {
  error.textContent = ([...checkboxWrapper.querySelectorAll('[data-checkbox]:checked')].length) ? '' : 'Ошибка';
}

form {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}

<form action="#">
  <div>
    <input class="checkbox" type="checkbox" id="check-1" data-checkbox="">
    <label for="check-1">Checkbox 1</label>
  </div>
  <div>
    <input class="checkbox" type="checkbox" id="check-2" data-checkbox="">
    <label for="check-2">Checkbox 2</label>
  </div>
  <div>
    <input class="checkbox" type="checkbox" id="check-3" data-checkbox="">
    <label for="check-3">Checkbox 3</label>
  </div>
  <div>
    <input class="checkbox" type="checkbox" id="check-4" data-checkbox="">
    <label for="check-4">Checkbox 4</label>
  </div>
  <span data-error=""></span>
  <button type="submit">Отправить</button>
</form>

БЛОГ НА HUSL

Валидация чекбокса

Ответы (2 шт):