Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Улучшения формы в статье Мгновенная валидация форм #5314

Merged
merged 2 commits into from
May 30, 2024

Conversation

kozlovtseva
Copy link
Contributor

@kozlovtseva kozlovtseva commented Apr 25, 2024

Описание

Улучшения формы в статье Мгновенная валидация форм:

  • валидация поля при вводе, отображение ошибок при анфокусе и по событию submit, сброс валидации на поле с фокусом
  • чекбокс вынесен отдельно от общего списка инпутов, тк событие blur на нем отрабатывает в момент повторного клика, а мы этого не хотим. Для чекбокса отдельно добавлено событие 'change' ('input', 'blur', 'focus' ему не нужны)
  • исправлен символ пробела в регулярке
  • добавлен метод пост
  • отредактировано описание функций в соответствии с правками

номер ишью - #5273

Чек-лист

  • [✓] Текст оформлен согласно руководству по стилю
  • [✓] Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
  • [✓] Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

@github-actions github-actions bot added статья Расширенный материал рецепт Контент для Рецептов labels Apr 25, 2024
@TatianaFokina TatianaFokina added the улучшение Доработка существующего label Apr 30, 2024
@@ -298,13 +298,19 @@
event.preventDefault()
if (hasInvalidInput()) {
formError()
inputList.forEach((inputElement) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

тут можно немного сократить
inputList.forEach(checkInputValidity)

Copy link
Member

@HellSquirrel HellSquirrel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Спасибо! Текущая реализация намного лучше :)
Но у нее все еще есть проблема
Если заполнить все поля правильно, но не убрать фокус с последнего поля в котором была ошибка, кнопка сабмита недоступна, см пример ниже
CleanShot 2024-05-09 at 20 27 41@2x

Самый простой способ решить эту проблему - не дизейблить кнопку сабмита
Способ посложнее - следить за изменением состояния формы при каждом обновлении поля, когда форма валидная делать кнопку отправки доступной, но ошибку показывать только на blur

Copy link

Превью контента из f53ac2d опубликовано.

@kozlovtseva
Copy link
Contributor Author

@HellSquirrel привет) большое спасибо за ревью! пушнула правочки

Copy link
Member

@HellSquirrel HellSquirrel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Класс!

@HellSquirrel HellSquirrel merged commit e3a74a8 into doka-guide:main May 30, 2024
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
рецепт Контент для Рецептов статья Расширенный материал улучшение Доработка существующего
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Улучшить и уточнить советы в статье про live-валидацию
4 participants