Всем привет, пишу простенькую валидацию на проверку даты рождения и окончания срока действия паспорта. В моём случае валидация очень криво отрабатывает, например проверка на пустоту отрабатывает только на одном 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 = "";
}
});
})