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

Рейтинг: 0Ответов: 1Опубликовано: 01.02.2023

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

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();
  }
});

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Это можно сделать, вынеся функционал валидации в отдельную фукнкцию и именно эту функцию передавать в 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