Как правильно написать валидацию для динамически добавляемых блоков в tag form?

Question

[Andy Koshman]

Всем привет, подскажите пожалуйста как правильно провалидировать динамически добавленные дочерние блоки в пределах одного блока? В моем случае, при добавлении нового блока и клику по кнопке "Применить" валидация отрабатывает очевидно по всем полям input как и прописано в условии, но я бы хотел чтобы валидация отрабатывала только на том блоке, по которому кликает пользователь. Как можно и правильно это реализовать?

Песочница: https://jsfiddle.net/hpxny9tv/15/

<form class="form__passengers-car">
  <div class="car-item" id="1">
    <input type="text" class="form__car-type" placeholder="Введите тип">
    <div></div>
    <input type="text" class="form__car-model" placeholder="Введите модель">
    <div></div>
    <button class="primary-btn" type="submit">Применить</button>
  </div>
</form>
<button class="form__car-add">Добавить транспорт</button>

let formPassengersCar = document.querySelector(".form__passengers-car");

formPassengersCar.addEventListener("click", function(e) {
  e.preventDefault();
  const parentBlockFormCar = e.target.closest(".car-item");
  if (e.target.classList.contains("primary-btn")) {
    let formInputs = document.querySelectorAll('input')
    formInputs.forEach(function(input) {
      if (input.value === "" || input.value === null) {
        input.classList.add("input-error");
        input.nextElementSibling.innerHTML =
          "Поле не заполнено";
      } else {
        input.classList.remove("input-error");
        input.nextElementSibling.innerHTML = "";
      }
    });

    let selectCarModel = parentBlockFormCar.querySelector(".form__car-model").value,
      selectCarType = parentBlockFormCar.querySelector(".form__car-type").value;

    let dataCars = {
      CarType: selectCarType,
      Model: selectCarModel,
    };

    let currentCars = JSON.parse(localStorage.getItem("Cars") || "[]");
    currentCars.push(dataCars);
    localStorage.setItem("Cars", JSON.stringify(currentCars));
  }
});

let passCar = document.querySelector(".form__passengers-car");
let addCar = document.querySelector(".form__car-add");
addCar.addEventListener("click", function() {
  let carItemClone = document.querySelector(".car-item");

  let passCarClone = document.createElement('div');
  passCarClone.classList.add('car-item')
  passCarClone.id = Math.floor(Math.random() * 100);
  passCarClone.innerHTML = `
       <span class="remove">X<span>
       <input type="text" class="form__car-type" placeholder="Введите тип">
       <input type="text" class="form__car-model" placeholder="Введите Марка и Модель тр. ср-ва" value="">
       <div></div>
         <button class="primary-btn" type="submit">Применить</button>`

  passCar.append(passCarClone);

  let remove = document.querySelector('.remove')
  passCar.addEventListener('click', function(e) {
    if (e.target.classList.contains("remove")) {
      e.target.parentNode.remove()
    }
  })
});

Answer 1

[v3shin]

При клике на Применить в блоке вызывайте что-то типа validate(block):

function validate(block) {
    block.querySelectorAll('input') // и дальше по коду
}

То есть, ищите элементы не в document, а в конкретном блоке.