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

Question

[darksladen]

Долго искал как же нужно делать валидацию, но не нашел то, что нужно. Меня интересует именно правильная валидация на средних сайтах, а также на лендингах (интересно, отличается ли вообще способы валидации в зависимости от масштаба проекта). Теперь обо всем по порядку.

Во-первых, насколько будет правильно делать единую логику валидации для всего сайта? Т.е. сделать обработчики для полей и повесить их на класс или на атрибут name (на сколько правильно вешать на name, а не id, например и почему), чтобы валидация применялась на всем сайте. Я общался с опытным разработчиком и он сказал, что они делают валидацию для каждой формы (почему??? Ведь про какое то поле можно забыть к примеру =)), а также что присваивать id полям это круто (также очень интересно почему, ведь id по сути вообще плохой тон и что если будет на 1 странице 2 одинаковые формы.. Тогда придется второй тоже другие id делать).

2. Хорошо ли использовать js плагины или лучше самому делать, опять же по словам крутого разраба, ПРОЩЕ сделать самому.. Что скажите?

3. Как обычно обрабатывается ответ от сервера? Сейчас я посылаю запрос контроллеру (laravel использую) и в представление передаю статус, в зависимости от которого выводятся разные сообщения. Т.е. в случае ошибки сервер дает вьюху с ошибкой. Лучше так делать или какой нибудь статус отсылать клиенту, чтобы там на js его уже обработать?

Если дочитали, то огромное спасибо =) Рад буду любым мыслям!

Comments

[darksladen]

Еще вопрос вспомнил не совсем правда по валидации, но надеюсь не забанят.. Где лучше указывать url, на который будет отправляться форма и правильно ли делать единый метод отправки ajax для всех стандартных форм?

Answer 1

[Ivan Bogachev]

они делают валидацию для каждой формы (почему??? Ведь про какое то поле можно забыть к примеру =))

Валидация - она на то и валидация, нужно все проверить.

ведь id по сути вообще плохой тон

Эмм... что? В стилях - да, это плохо, но не в скриптах.

Тогда придется второй тоже другие id делать

Это проблема? Кажется, что нет.

по словам крутого разраба, ПРОЩЕ сделать самому.. Что скажите?

Валидация на клиенте - это регулярное выражение + некая реакция на правильность/неправильность действий пользователя. Написать руками часто действительно проще и быстрее, чем переписывать готовое.

посылаю запрос контроллеру (laravel использую) и в представление передаю статус, в зависимости от которого выводятся разные сообщения. Т.е. в случае ошибки сервер дает вьюху с ошибкой.

С точки зрения UX вы должны (если пользователь ошибся) показать ему сразу на ошибку в духе "эй, парень, у тебя пароль короче восьми символов" и подсветить форму с паролем (пример). И ничего не отправлять на сервер.

Comments

[darksladen]

Вы загнали меня в полный тупик!!!

> Валидация - она на то и валидация, нужно все проверить.

Так я про тоже.. Если нам в любом случае проверять все, почему не вешать обработку на класс или name, а писать все время для каждого поля?
> Эмм... что? В стилях - да, это плохо, но не в скриптах.

А что в скриптах может быть хорошего? Ведь если кто то случайно поставит такой же id то скрипт сработает только для 1 элемента.

> Валидация на клиенте - это регулярное выражение + некая реакция на правильность/неправильность действий пользователя. Написать руками часто действительно проще и быстрее, чем переписывать готовое.

Почему проще, если можно 1 раз повесить валидцию на класс допустим и любое поле с этим классом всегда будет проверяться. Это же и дублирование кода в конце концов.. Смысл?

> С точки зрения UX вы должны (если пользователь ошибся) показать ему сразу на ошибку в духе "эй, парень, у тебя пароль короче восьми символов" и подсветить форму с паролем (пример). И ничего не отправлять на сервер.

Это ясно.. Я имел ввиду, что если бд упала к примеру и сервер не смог обработать клиента =) Надо бы клиенту вывести что то вроде этого "Извините, попробуйте позже" Лучше это делать как то на сервере или просто отсылать статус в js чтобы потом можно было его обработать

[Ivan Bogachev]

- А что в скриптах может быть хорошего? Ведь если кто то случайно поставит такой же id...
1) Как вы собираетесь отличать разные инпуты без id?
2) Два одинаковых id не может быть на странице - вам любой валидатор тут же об этом напомнит.

- Хорошо ли использовать js плагины или лучше самому делать, опять же по словам крутого разраба, ПРОЩЕ сделать самому.. Что скажите?
- Написать руками часто действительно проще и быстрее, чем переписывать готовое решение.
- Почему проще, если можно 1 раз повесить валидцию на класс допустим и любое поле с этим классом всегда будет проверяться...
Что-то я вас не понял. Вопрос был о том, стоит ли использовать готовый плагин, или написать свое решение.

[darksladen]

По атрибуту name вполне можно отличить инпуты, не вижу проблемы..Также можно по классу.. Если на 1 странице 3 формы отправки заявки к примеру, мне в каждой форме полям свой id давать? name-1, name-2, name-3? Какие плюсы такого подхода, что я получу?

Я просто хотел чтобы вы объяснили свою позицию. Чем для вас проще руками делать валидацию каждой формы, когда есть плагины, которые могут сделать ее за вас и вам надо всего лишь 1 раз их настроить? dpr написал подход, который мне кажется более логичным.. Какое преимущество я могу полчить, используя ваш подход? У этого плагина кстати в доке нет у инпутов id..

Чтобы вы понимали я не отстаиваю свою позицию, а хочу чтобы вы меня убедили в обратном, но вы задаете мне вопросы какие то.. Объясните пожалуйста свою точку зрения и сразу все будет понятно

[Ivan Bogachev]

> Я просто хотел чтобы вы объяснили свою позицию. Чем для вас проще руками делать валидацию каждой формы, когда есть плагины, которые могут сделать ее за вас и вам надо всего лишь 1 раз их настроить? Объясните пожалуйста свою точку зрения и сразу все будет понятно
Разумеется, я поясню. В формах, которые я делаю, сложная верстка и при успешной/неуспешной валидации происходит много всего: что-то подсветилось, какое-то сообщение появилось, какая-то анимация запустилась и.т.д. При этом все это может быть привязано к модели Vue и часто одни кнопки зависят от других. Тут стороннее решение в 90% случаев будет нуждаться в существенной доработке или очень болезненной интеграции.

[darksladen]

Ivan Bogachev: Эти плагины достаточно гибкие и можно без проблем их подстроить под себя, не знаю правда как на vue это было бы реализовано, но хорошо раз vue значит с этим понятно, там скорее действительно проще писать для каждой формы, ок.. А что с id? Зачем они? Выше я написал, как бы я отличал инпуты..

[Ivan Bogachev]

darksladen:
> А что с id? Зачем они? Выше я написал, как бы я отличал инпуты..

name - не уникальная вещь, class - очевидно тоже. Когда-нибудь у вас возникнет потребность определить в каком именно инпуте происходят действия или какая именно форма на странице отправляется - причин этому может быть множество, начиная от скролла к месту, в котором возникла проблема, и заканчивая статистикой того, на какой форме у вас пользователи чаще ошибаются.

И вопрос, про который вы немного забыли: как корректно привязать label к input без id? (Надеюсь вы не спросите зачем label вообще нужен).

Answer 2

[Сергей delphinpro]

Берем плагин www.formvalidator.net
Подключаем, инициализируем и всё. Все формы на сайте валидируются. Правила валидации задаются в дата-атрибутах полей. При желании, если правила более или менее одинаковые в разных формах - их можно задать в инициализации плагина. Плагин с широкими возможностями, достаточно много стандартных валидаторов, можно легко дописывать свои, мультиязычный и т.д. и т.п.
Для маленьких и средних сайтов, включая лендинги - зе бест.

по словам крутого разраба, ПРОЩЕ сделать самому

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

Где лучше указывать url, на который будет отправляться форма

Единственное правильное место для указания данного URL - атрибут action формы. Без вариантов.

Comments

[eldar_web]

А если придется проверить на существования логина (если используешь фреймворк), то как это сделать?

[eldar_web]

Имею ввиду, в базе данных.

[darksladen]

eldar_web: www.formvalidator.net/#security-validators_backend