Почему не срабатывает удаление ошибок при валидации формы?

Question

[Иван Симонов]

Здравствуйте
В целях самообучение - решил написать валидацию для формы
Получился данный код - Fiddle

Подскажите, почему не срабатывает данная ф-ция

const removeErrors = function() {
        const errors = form.querySelectorAll('.errors');
		console.log(errors);
        for (let i = 0; i < errors.length; i++) {
            errors[i].remove();			
        }
		
    }

также вопрос - как правильно выводить ошибки
сейчас получается сразу выводиться одновременно две ошибки


Заранее спасибо

Answer 1

[Александр Епихин]

На 19 строке не правильно указан класс:

const errors = form.querySelectorAll('.error');

Должно быть:

const errors = form.querySelectorAll('.form__error');

Comments

[Иван Симонов]

Спасибо. Моя невнимательность. Подскажите еще, как убрать двойную ошибку?

[Александр Епихин]

Если поставить правильный класс то под одним ипнутом будет отображаться только одна ошибка. И если мы пришли к тому что всегда будет отображаться только одна ошибка, то лучше не удалять/добавлять DOM элементы, а хранить ссылку на эти элементы (ошибки) и менять текст и скрывать/показывать их.

[Иван Симонов]

Александр Епихин, Спасибо. Вроде получилось - https://jsfiddle.net/p1gc2b3o/. Один нюанс, почему то в первом поле с пустым значением - кнопка становиться активной.

[Александр Епихин]

Потому что в checkFieldsEmpty идет перебор полей и достаточно чтобы последнее поле было не пустым чтобы у submit удалился атрибут disabled. Нужно проверять чтобы все поля были не пустыми. Есть несколько вариантов, самый простой в данном случае это при нахождении первого пустого поля добавлять submit атрибут disabled и выходить из цикла (break). И еще функция называется checkFieldsEmpty, а в ней помимо проверки на пустоту проверяется еще минимальная длина и выводятся сообщения об ошибке. По хорошему нужно все вынести в отдельные функции. И запускать валидацию не всех полей при событии input, а только на том input где сработало событие. Также событие input не везде сработает при autcomplete, необходимо использовать также событие change.

[Иван Симонов]

Александр Епихин, Спасибо. Вынес отдельно функции, но сейчас получаю сразу две ошибки
https://jsfiddle.net/89mv17L3/. Не могу понять, как выводить одну ошибку, которая соотв. условию

[Александр Епихин]

Давай начнем сначала.
Нам нужен код который будет валидировать все формы.
Запуск первой валидации и live - режима будет запускаться после первого события submit. Это важно. Так как пользователь только начал заполнять форму, ввел 1 символ и у него уже подсветились все поля и появилось куча ошибок.
Пользователь нажал на кнопку submit, запустилась валидация всей формы и добавились обработчики событий для каждого поля.
У обчного input необходимо слушать 2 события input - для обычного ввода с клавиатуры и change - для автокомплита.
После срабатывания одного из этих событий необходимо запустить функцию валидации (validate). Проверять стоит только то поле на котором сработало событие. Функция validate должно вызывать другие функции предикаты которые должны проверять на пустоту (isEmpty) и минимальную длину (isTooShort) и эти функции должны получать на вход значение и правило (например минимальная длина) и возвращать true/false. Также имеет значение порядок вызовов этих функций, сначала необходимо вызвать isEmpty и если вернулось true (не прошло проверку) значит нет необходимости вызывать isTooShort.
После того как было определено валидно поле или нет (конъюнкция всех результатов проверки), то вызываем в функции validate функцию отвечающую за показ ошибок toggleError и передаем в нее имя поля и статус валидации (true/false). Если в toggleError передали true значит поле валидно и необходимо скрыть ошибку, если false - то необходимо показать ошибку. Тут нам понадобится внешняя переменная errors которая будет содержать ссылки на html элементы ошибок полей. Если передали false, то нам необходимо проверить был ли ранее создан html элемент ошибки или нет. Object.prototype.hasOwnProperty(errors, name), если возвращается true (т.е. ошибка была ранее создана), то просто показываем эту ошибку (лучше через добавление CSS классов, так как позволит в будущем при необходимости анимировать появление). Если вернулось false (ошибки еще не было) то необходимо создать html элемент ошибки и вставить на страницу. Постоянно удалять и добавлять html элементы это плохо, лучше показывать или скрывать их.
Осталась задача менять состояние (disabled) кнопки submit. Для этого должна быть отдельная функция. Подумай как ее реализовать.