Как реализовать валидацию формы?

Question

[Yubi]

Как реализовать валидацию формы используя только css и html на ограничение количество символов, т.е. да пустим если в форме задано определенное кол-во символов
() то когда доходит до предела форма выделяется красным, но если форма становится не активной то она возвращается в исходный цвет.

Answer 1

[Дима Паутов]

html + css не имеет таких возможностей. Есть только самые базовые.

Атрибуты у полей
Обязательное заполнение - required
Тип полей - password, tel, emal(Использовать вкупе с required), тогда, например для поля с типом emal будет выводится соответствующее сообщение, мол, для email нужен символ @
Паттер regexp - pattern(Использовать вкупе с required)
Макс. символов - maxlength(Использовать вкупе с required)
Мин. символов - minlength(Использовать вкупе с required)

И через css есть псевдоклассы
invalid
valid

На большее не расчитывайте. Нужна хорошая валидация, используйте js библиотеки

Answer 2

[Алексей Скляров]

Всегда радует, что большинство моих ответов на вопросы это просто первая ссылка из гугла по вашему поисковому запросу:

https://css-tricks.com/form-validation-ux-html-css/

P.S. Умение пользоваться гуглом это первое, чему стоит научиться.

Comments

[Yubi]

Это не то

[Алексей Скляров]

Yubi, а что тут не то? стилизация есть, паттерны для символов и почты есть. По вашему вопросу это как раз самое то, все дело в том, что сама реализация валидации на css+html это примерно как сделать квадратные колеса, поэтому только js.

Answer 3

[Ольга Ветер]

Раз предыдущий ответ не подходит, то без js никак. Меняйте класс при нужном условии, и обратно, когда вам надо.