Chupachar
@Chupachar
front-end dev

Как правильно провалидировать поля формы?

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

https://jsfiddle.net/9udqofhk/5/

<form>
  <div>Введите дату рождения: </div>
  <input type="date" class="form-date form-birthday">
  <div></div>
  <div>Введите срок окончания действия паспорта: </div>
  <input type="date" class="form-date form-passport">
  <div></div>
  <button type='submit'>click</button>
</form>


const form = document.querySelector('form')
 const formDate = document.querySelectorAll('.form-date')
 const formBirtdayDate = document.querySelectorAll(".form-birthday");
 const formPassportDate = document.querySelectorAll(".form-passport");
 const currentYear = new Date().getFullYear();

 form.addEventListener('click', function(e) {
   e.preventDefault()
   let valid = true;
   formDate.forEach((date) => {
     if (date.value == null || date.value === "") {
       date.classList.add("input-error");
       date.nextElementSibling.innerHTML = "Введите дату";
       valid = false;
     } else {
       date.classList.remove("input-error");
       date.nextElementSibling.innerHTML = "";
     }
   });
   formPassportDate.forEach((pass) => {
     const dateValue = pass.value.split("-");
     const enteredDate = parseInt(dateValue[0].split(" "));
     if (enteredDate > currentYear + 10) {
       pass.classList.add("input-error");
       pass.nextElementSibling.innerHTML =
         "Введите актуальную дату срока окончания действия паспорта";
       valid = false;
     } else if (enteredDate < 1930) {
       pass.classList.add("input-error");
       pass.nextElementSibling.innerHTML =
         "Введите дату не раньше 1930 года";
       valid = false;
     }

   })
   formBirtdayDate.forEach((birth) => {
     const dateValue = birth.value.split("-");
     const enteredDate = parseInt(dateValue[0].split(" "));
     if (enteredDate > currentYear) {
       birth.classList.add("input-error");
       birth.nextElementSibling.innerHTML =
         "Введите дату не превышающую текущую";
       valid = false;
     } else if (enteredDate < 1930) {
       birth.classList.add("input-error");
       birth.nextElementSibling.innerHTML =
         "Введите дату не раньше 1930 года";
       valid = false;
     } else {
       birth.classList.remove("input-error");
       birth.nextElementSibling.innerHTML = "";
     }
   });
 })
  • Вопрос задан
  • 116 просмотров
Решения вопроса 1
@historydev Куратор тега JavaScript
Острая аллергия на анимешников
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы