[Из песочницы] Простая валидация формы без JS10.07.2017 21:32

Комментарии (3)

Aingis

10 июля 2017 в 18:30

+3

↑

↓

К сожалению, при таком использовании :valid срабатывает сразу как будет только введён хоть один символ, что плохо с точки зрения пользовательского опыта. А крайне неудобен тем, что требует обязательного указания протокола http: (https:), просто домен, как в адресной строке браузера, там не написать. Роботы должны делать удобную жизнь людям, а не наоборот.

Лучше на тему браузерной валидации форм почитать трилогию PPK: «Native form validation» (part 2, part 3)
iXCray

10 июля 2017 в 18:33

0

↑

↓

Можно, конечно, назвать это придиркой, но все же:

Это хороший пример, который показывает, что для сложной и действительно удобной для пользователя (а мы работаем на удовольствие наших пользователей), связка pattern+CSS является так себе средством.

А когда мы учтем все необходимые требования к каждому полю, а также (sic!) зависимости между полями, pattern будет неподъемным для понимания по сравнению с парой удобных функций JS.
Akuma

10 июля 2017 в 20:40 (комментарий был изменён)

+1

↑

↓

Таким образом, не прибегая к JS мы с помощью двух строк в CSS смогли…

… подпортить нервы незадачливому пользователю, попавшему на наш сайт.
Ну правда. Не хочу обидеть автора, т.к. при неимении JS это отличный вариант, вот только кто сейчас сидит без JS? Я и 5 лет назад таких не видел в реальной жизни, а сейчас его отключают либо специально и сознательно, либо у них не работает абсолютно ничего. Давайте будем ориентироваться на реальных пользователей и предоставлять им удобные маски, подсказки «по проверке», а не при первом символе и возможность ввести ссылку без протокола.
Если вам так хочется сделать валидацию без JS, просто отпраляете форму и рендерите ошибки на стороне сервера. Там можно и телефон в порядок привести (79181234567 вполне себе валиден) и ссылке приписать протокол (google.ru и https://google.ru/ не отличает 99.9% пользователей).