Как не пугать пользователя сразу сообщениями об ошибках, когда он к форме еще и не прикасался?

Question

[Андрей Федоров]

Обрабатываю ошибки формы c помощью html+css.
Все работает нормально, но есть нюанс:
Если поле формы не заполнено, оно считается не валидным, это правильно, показывается ошибка. Только вот пользователь только открыл страницу с формой, а ему пишет что уже куча ошибок.

codepen.io/aliencash/pen/GZWpKa?editors=1100

Как сделать индикацию только когда пользователь уже приступил к заполнению формы? Одним словом нужна хитрая комбинация псевдоклассов у input.

Answer 1

[Роман Макаров]

из очевидного? подставить начально значение, типа 0 или изменить регулярку.
Но лично на мой взгляд выносить логику в шаблон - занятие неблагодарное. Тем более валидации на js обладает большей гибкостью

Answer 2

[Даниил Игоревич]

codepen.io/pena/pen/vGxNeo

Comments

[Андрей Федоров]

Так не работает же. Введите букву - где error?
На js сделал вот так onblur="this.required = true;" и убрал required из input.

[Даниил Игоревич]

Андрей Федоров: готово.

[Даниил Игоревич]

Андрей Федоров: подходит такое решение?

[Андрей Федоров]

Даниил Ораин: Т.е. вы мой pattern используете в js для валидации? Как-то больно задней ногой левое ухо чешем, нет? Честно скажу, я рассчитывал на решение без js.

[Даниил Игоревич]

Андрей Федоров: указываешь pattern в HTML, и через javascript он используется. Через css этого не сделаешь :)

[Андрей Федоров]

Даниил Ораин: ну уж. ) рановато css списывать со счетов. тут игры пишут на чистом css, а вы говорите. )))

[Даниил Игоревич]

Андрей Федоров: какие же?

[Андрей Федоров]

Даниил Ораин: на хабре поищите, было несколько статей...

[Даниил Игоревич]

Андрей Федоров: ну, появился вариант на css?

[Андрей Федоров]

Даниил Ораин: Пока нет. Думаю...