В идеале, пользователи будут заполнять веб-формы с необходимой информацией и закончить свою работу успешно.Тем не менее, люди часто совершают ошибки.Это где веб-формы validation вступает в игру.Цель проверки веб-форму для того, чтобы пользователь предоставил необходимые и правильно отформатированный информацию, необходимую для успешного завершения операции.В этой статье мы будем выходить за рамки проверки себя и изучить различные методы проверки и ошибки обратной связи, методов и approaches.

Проверка methods

User’ S вход может быть подтверждено на сервере и на клиенте (веб-браузер).Таким образом, у нас есть серверные и клиентские проверки.We’ обсудим плюсы и минусы each.

Серверные validation

В серверной проверки, информация будет отправлена ​​на сервер и проверены с помощью одного из серверных языков.Если проверка не пройдена, то ответ будет отправлено обратно клиенту, страница, которая содержит веб-формы обновляется и обратная связь показано на рисунке.Этот метод является безопасным, потому что она будет работать, даже если JavaScript выключен в браузере и can’ т быть легко обойдены злоумышленниками.С другой стороны, пользователи должны будут заполнить информацию, не получив ответа, пока они не отправить форму.Это приводит к медленному ответ от server.

Исключение составляет проверки с использованием Ajax.Ajax призывает к серверу можно проверить, как вы вводите и обеспечивают немедленную обратную связь.Проверка в данном контексте относится к проверке правил, таких как имя пользователя наличия номеров.Вы можете прочитать больше о проверке с Ajax в этой прекрасной tutorial на jQueryForDesigners.

Эта диаграмма показывает различия между клиентской и серверной проверки и другие techniques.

На стороне клиента validation

Проверки на стороне сервера достаточно иметь успешную и безопасную форму проверки.Для лучшего пользовательского опыта, однако, вы можете рассмотреть возможность использования проверки на стороне клиента.Этот тип проверки выполняется на клиенте с помощью скриптовых языков, таких как JavaScript.С помощью скриптовых языков user’ S вход может быть подтверждено как они типа.Это означает, что более отзывчивым, визуально богатых validation.

С проверки на стороне клиента, форма никогда не будет подано, если проверка не пройдена.Проверка обрабатывается в методах JavaScript, что вы создаете (или в рамки / плагинов), а пользователи получают немедленную обратную связь, если проверка fails.

Главный недостаток проверки на стороне клиента является то, что она опирается на JavaScript.Если пользователям включить JavaScript выключен, они легко могут обойти проверку.Именно поэтому проверка должна всегда быть реализована на клиенте и сервере.Пообъединения серверных и клиентских методами мы можем получить лучшее из двух: быстрая реакция, более безопасного и лучшего проверки пользователь experience.

Rich, мгновенная обратная связь проверка выполняется на клиенте TypePad

Что validate

Есть несколько различных типов проверки вы можете выполнить: необходимые поля, правильный формат и подтверждение fields.

Требуется information

Первая и наиболее очевидная информация, которая должна быть подтверждена требуется информация – информации, без которой операция не может быть завершена успешно.Таким образом, проверка должна гарантировать, что пользователь условии, что все необходимые данные в веб-форму, и он должен потерпеть неудачу, если хотя бы одно из полей не предусмотрено.Обязательные для заполнения поля должны быть четко обозначены для того, чтобы информировать пользователей о том, что информация должна быть предоставлена ​​до front.

Обязательные для заполнения поля на Комодо Медиа форме комментариев блога отмечены “ required” помощь text.

Распространенный способ, чтобы отметить необходимые поля С звездочкой (*) .Однако, не все пользователи знают, что такое звездочки знак.Начинающие пользователи и старше, очень вероятно, имеют лишь общее представление о том, что звездочка может означать.Это причина, почему это хорошая практика, чтобы либо положить записку в верхней части формы, которая указывает, что все поля, отмеченные звездочкой, обязательны или использовать необходимые маркеры поля.В случае, если все поля обязательны для заполнения нет никакой необходимости размещать звездочки или маркеры в форме.Простое сообщение, что все поля обязательны для заполнения является enough.

Facebook doesn’ T предоставить информацию о необходимых полей.Пользователи получают информацию, что все поля обязательны для заполнения только после нажмите “ submit”-button.

В прошлом году мы провели обследование на веб-форму design.По данным этого обследования “ дизайнеры, как правило, чтобы удалить все ненужные детали и отвлекающих которые don’ т помочь пользователю для завершения form”.Более детальный анализ показал тенденцию использования очень мало обязательных полей – более чем на 50% от форм, используемых не более 5 обязательных полей, в то время как необязательные поля часто избегать.Это может быть полезным для вас при принятии решения о необходимых полей.

Правильныйformat

Помимо обеспечения, которые пользователи предоставляют необходимой информации, проверка должна гарантировать, что пользователи предоставляют информацию в правильном формате.Это касается различных случаев, таких как адреса электронной почты, URL-адреса, даты, номера телефонов и другие.Если информация не находится в правильном формате, пользователи должны быть информированы и правильного формата должны быть предложены.Наверное, самый простой способ проверить “ correct” форматирование использовать регулярные expressions.

Пожалуйста, обратите внимание, что зачастую это хорошая идея, чтобы не навязывать строгий узор вход на users; it’ лучше, на самом деле позволяет пользователям вводить текст в различные форматы и синтаксиса, и сделать приложение интерпретировать егоразумно.Пользователь просто хочет что-то сделать, а не думать о “ correct” форматами и сложных интерфейсов.Пусть тип пользователя, что ему нужно, и если it’ S разумным, сделать программное обеспечение делать правильные вещи с ним.Этот шаблон также часто называют прощает формат дизайн пользовательского интерфейса pattern.

Carbonmade регистрационную форму проверяет URL формате, сообщает пользователю об ошибке и предлагает способы исправления it.

Чтобы узнать больше о регулярных выражений, обязательно прочитайте Essential Guide регулярным выражениям: инструменты и Tutorials или, если вы уже знакомы с основами: важнейшими понятиями За Расширенные регулярные Expressions.We’ обсудим некоторые другие методы формате позже в article.

Подтверждение fields

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

Photobucket регистрационную форму необходимы пользователям повторно вводить пароль, который они ранее введенные для того, чтобы убедиться, что он был правильно entered.

Подтверждение поле должно быть помещен рядом (или ниже) целевого поля.Он должен четко описать цели таких областях, как “ Подтвердить password”.Если два значения не совпадают, пользователь должен быть информирован.Как вариант, можно использовать показатель успеха, если значения не match.

Вторая часть нашего survey показывает интересную информацию о подтверждении поля.E-mail подтверждение является обязательным лишь в 18% сайтов, а подтверждение пароля является обязательной в 72% веб-сайтов.Удивительно, но крупные сайты, такие как Facebook, LinkedIn, Twitter и Stumbleupon don’ т требует пароль confirmation.

Проверка feedback

Если проверка не пройдена, система должна позволить пользователям узнать это, предоставляя четкий и недвусмысленный сигнал (как правило, одно или два предложения) и способы исправления ошибок.Так как пользователи должны заметить сообщение об ошибке сразу, это хорошая практика, чтобы поместить его в верхней части веб-форму, прежде чем все другие поля.Это также позволит чтения с экрана легко получить доступ к message.

Сообщении должны быть указаны предпочтительно красного цвета, так как это цвета, которые люди обычно связывают с ошибками и оно должно содержать соответствующую иконку, чтобы получить больше внимания.Иконка должна быть глобально узнаваемый, такие как красный круг с белым крестом.Это также поможет людям с нарушениями зрения выявления смысла сообщения.В дополнение к этому, пользователи должны быть проинформированы о том, какие поля ввода должны быть checked.

Счет машины регистрационную форму doesn’ T обеспечивают ошибки обратной связи.Сообщение об ошибке отсутствует, и поля ввода окрашены в пастельные красные, что не так легко spot.

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

• Предоставляя красном встроенные или маркеров рядом с каждым недействительным field
• По изменению цвета фона или цвет границ, признанных недействительными поля (в красном)
• По изменение цвета поля labels
• Предоставляя ошибке советы (воздушные шары) рядом друг с field

Если вы предоставляете ошибке советы или помощь, быть кратким и информативным.Например, если дата находится в неправильном, формат предоставляет пользователям подробную информацию о том, как отформатировать его должным образом: “ дата должна быть в ДД-ММ-yyyy-format”.Иногда также хорошая идея, чтобы эти намеки в качестве начального значения ваших полей ввода.Таким образом, пользователь будет сначала прочитать подсказку в поле ввода и когда он / она начнет вводить данные, подсказка disappear.

Проверка на submit

“ classic” способ выполнить проверку, когда пользователь отправляет данные через “ submit”-button.Проверка выполняется, и если найдены ошибки, обратная связь возвращается и отображаться для пользователя.Таким образом, пользователи смогут заполнить форму безперерывами.Но, это может быть недостатком, а также.Пользователи смогут исправить ошибки только после того, попробуйте отправить форму и получить ответ от сервера.Этот метод является типичным для проверки на стороне сервера, но может также быть сделано на клиента side.

Обратная Ballpark регистрационную форму происходит при представить.Это показывает очевидное сообщение об ошибке с неправильным полей в верхней части формы и отмечается каждый неверный поле с tip.

Реального времени проверки (или мгновенное подтверждение)

В отличие от предыдущей техники, реального времени проверки предупреждает пользователей, когда они заполняют form.Это doesn’ т обязательно означает, что проверка выполняется на каждом нажатие клавиши, а когда поле теряет фокус.Таким образом, пользователи будут получать немедленную обратную связь о своем входе, например,если имя пользователя доступно или если дата находится в правильном формате.Очевидно, что момент проверки происходит во время ввода в поле ввода или после поля ввода теряет фокус.Как правило, это дополняется текстовое сообщение, отзыв или значок состояния.

Yahoo регистрационную форму реализует пароль измеритель силы, которая дает обратную связь при вводе в letters.

Мгновенный проверки должны быть выполнены тщательно и, в соответствующих случаях, поскольку это может быть недовольными, если злоупотреблять или misused.

регистрационную форму на TypePad не только обеспечивает мгновенную обратную связь проверку, которая информирует пользователей о различных ошибок проверки – он также указывает успешно вошли information.

? Чего следует избегать

Есть две вещи, которые вы действительно должны стараться избегать при проектировании формы проверки.Во-первых, одной страницы ошибок плохо practice.Страница Паленый ошибка означает, что пользователи перенаправляются на веб-форме они заполнены на страницу, которая показывает обратную связь.В этом случае, пользователи вынуждены просматривать назад, чтобы исправить ошибки.Когда они просматривают назад им придется запоминать информацию, предоставленную в сообщении об ошибке.То же самое относится и к обратной связью сообщений во всплывающем окне.Не только всплывающие окна раздражают, но как только они будут закрыты все обратная связь lost.

Интересная находка в Вторая часть SM survey является то, что “ 30% из формотображаться только сообщения об ошибке в верхней части формы (без полей ввода были выделены) ” а “ 29% были подчеркнуты поля ввода с соответствующими сообщения …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров