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

[BANOnotIT]

https://doka.guide/recipes/validation/

1. Форма не показывает что конкретно мне нужно заполнять после submit, вообще никакое поле не обрабатывает required
2. Поля показывают валидацию даже тогда, когда я ещё не закончил вводить правильное значение. Например я начинаю вводить me@bano.dev, а форма меня наказывает за неправильный ввод ещё на букве m.
3. Кнопка отправки почему то имеет disabled состояние, хотя зачем оно дизейблится вообще не понятно, а ещё она дизейблится через aria-disabled вместо нативного disabled. В общем кнопку дизейблить совершенно не обязательно, наоборот она может всегда быть активной, ведь мы всегда можем сказать, что что-то пошло не так после ее нажатия и перед отправкой формы.

Очень советую переписать материал с учётом тех проблем что я описал и возможно опираясь на материал smashing magazine посвященный именно этой форме валидации:
https://www.smashingmagazine.com/2022/09/inline-validation-web-forms-ux/

[TatianaFokina]

Да, дизейблить кнопки не очень хорошо. Но на Smashing Magazine также можно найти совет про трюк с ARIA-атрибутом.

• https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/#making-disabled-buttons-more-inclusive
• https://css-tricks.com/making-disabled-buttons-more-inclusive/#aa-aria-to-the-rescue

[TatianaFokina]

Было бы клёво, если бы ты принёс пиар с улучшениями. И ещё с учётом того, что написано про aria-disabled по ссылочкам, которыми с тобой поделилась.

[TatianaFokina]

Плюс к тому, что ещё стоит улучшить.

@makarovaiuliia

Спецсимвол \s матчит не только пробел, но и кучку других непечатаемых символов (MDN), что может стать потенциальным вектором атаки. В данном примере в регулярке лучше явно указать пробел

В форме не хватает атрибута метод = пост.

[BANOnotIT]

4. Инпуты отличаются только цветом и наличием текста ошибки под инпутом. У многих инпутов бывает help text, поэтому кроме цвета и текста, который будет слипаться семантически с help text'ом тот же SM советует использовать другие визуальные подсказки

[makarovaiuliia]

Ребят, привет! Пока не могу заняться, так как ну оч загружена. Если меня дождется, то я доделаю потом

[kozlovtseva]

@makarovaiuliia привет) могу перехватить у тебя задачку, если не против)

[makarovaiuliia]

Да, спасибо большое 🙏🏻