Как валидировать несколько однотипных форм одной функцией?

Question

Есть код для валидации одной формы, как мне автоматизировать его, чтобы применялся для каждой формы на сайте?

const form = document.querySelector('.form');
const formInputs = form.querySelectorAll('input');
const checkbox = form.querySelector('input[type="checkbox"]');

form.addEventListener('submit', (e) => {
  const emptyInputs = Array.from(formInputs).filter((e) => e.value === '');

  formInputs.forEach(function(e) {
    if (e.value === '') {
      e.parentNode.classList.add('error');
    } else {
      e.parentNode.classList.remove('error');
    }

    if (!checkbox.checked) {
      checkbox.classList.add('error');
    } else {
      checkbox.classList.remove('error');
    }
  });

  if (emptyInputs.length !== 0) {
    e.preventDefault();
  }
});

Answer 1

Это можно сделать, вынеся функционал валидации в отдельную фукнкцию и именно эту функцию передавать в addEventListener

const form = document.querySelector('.form');
form.addEventListener('submit', formValidator);

function formValidator(e) {
  const formInputs = this.querySelectorAll('input');
  const checkbox = this.querySelector('input[type="checkbox"]');
  
  const emptyInputs = Array.from(formInputs).filter((e) => e.value === '');

  formInputs.forEach(function(e) {
    if (e.value === '') {
      e.parentNode.classList.add('error');
    } else {
      e.parentNode.classList.remove('error');
    }

    if (!checkbox.checked) {
      checkbox.classList.add('error');
    } else {
      checkbox.classList.remove('error');
    }
  });

  if (emptyInputs.length !== 0) {
    e.preventDefault();
  }
}

Обратите внимание, что для отбора input'ов используется контекст this

БЛОГ НА HUSL

Как валидировать несколько однотипных форм одной функцией?

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