Заметки фрилансера

Валидация полей формы без привлечения сторонних модулей

const inputsForm = document.querySelectorAll(".mainForm input");
Array.from(inputsForm, (input) => {
    input.addEventListener("change", function (event) {
    //console.log(input.validity.valid)
        event.target.offsetParent.classList.remove('error')
        if (!input.validity.valid) {
            event.target.offsetParent.classList.add('error')
        }

    })
})

1. Собрали все инпуты
2. При изменении поля смотрим на его валидность.
   Используем JavaScript-объект ValidityState - validity.valid, для проверки каждого поля ввода. Если поле не валидно, показывается сообщение об ошибке.
   Для поля с телефоном используем паттерн - pattern="^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$"
3. При невалидности добавляем класс .error родительскому блоку