Как сделать проверку только той формы, которая вызывает событие?

Question

[Кристина]

Песочница. Могу использовать this(тренировалась на конструкторе, в основном), но не понимаю, как здесь его прикрутить.

<form action="" class="pageForm">
  <input type="text" name="" class="data">
  <input type="text" name="" class="data">
  <a href="https://gist.github.com/" target="_blank" class="link">Ссылка</a>
</form>

let pageBody = document.querySelector('body');
let link = document.querySelector('.link');

pageBody.addEventListener('click', function (event) {
  if (event.target.className != 'link') return;
  let validate = document.querySelectorAll('.data').forEach(val => {
    if(val.value == '') {
      val.style.border ="2px solid red";
      return event.preventDefault();
    } else val.style.border ="2px solid green";
  });
});

Answer 1

[Алексей Николаев]

Получите ближайшую форму при помощи метода .closest() и ищите элементы .data уже в ней.

pageBody.addEventListener('click', function (event) {
  if (event.target.className != 'link') return;

  // Вернет ближайшую к элементу .link форму
  const form = event.target.closest('form');
  let validate = form.querySelectorAll('.data').forEach(val => {
    if(val.value == '') {
      val.style.border ="2px solid red";
      return event.preventDefault();
    } else val.style.border ="2px solid green";
  });
});

Но я бы рекомендовал отдать валидацию на попечение браузера. Стайлинг же неверно заполненных полей можно настроить через css.

Comments

[Кристина]

Спасибо! А как сделать, чтобы не пришлось полифилить? Немного проще, как говорится)

[Алексей Николаев]

Кристина, можете ловить событие на уровне формы. Меньше телодвижений внутри самого обработчика, но привязывать этот самый обработчик придется к каждой форме.

const forms = document.querySelectorAll('.pageForm');
for(const form of forms) {
    form.addEventListener('click', function (event) {
      if (event.target.className != 'link') return;

        let validate = form.querySelectorAll('.data').forEach(val => {
          if(val.value == '') {
            val.style.border ="2px solid red";
           return event.preventDefault();
          } else val.style.border ="2px solid green";
        });
      });
}

[Кристина]

Алексей Николаев, Круто, спасибо! Добавьте в ответ этот вариант, пожалуйста, вдруг ещё кому-то пригодится)

А если ещё третий вариант предложите, буду очень благодарна! Расширит мне мысли. Просто только учусь :)

Answer 2

[msdosx86]

const link = document.querySelector('.link');
link.addEventListener('click', e => {
  e.preventDefault();
  const inputs = document.querySelectorAll('.data');
  inputs.forEach(input => {
    if (input.value == '') {
      input.style.border = '2px solid red';
    } else {
      input.style.border = '2px solid green';
    }
  })
})