Чужие мысли

Удобные формы с помощью jQuery

Валидация

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

Для таких полей можно задавать ограничения, не позволяющие вводить пользователю неправильные данные.

• Alphanumeric – позволяет указывать, какие символы можно вводить в каждое поле в форме (например, «только символы», «только числа», «только числа, пробелы и тире» и т.д.).

  

• jVal – поддерживает проверку длины полей, регулярные выражения, сравнение значений в разных полях (например, пароль и подтверждение пароля).

  

• Validation – самый известный и продвинутый плагин для валидации.

  

Маски ввода

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

• meioMask – простой плагин для добавления масок к полям.

  

• Masked Input – еще один плагин для добавления масок. Маска появляется при установке фокуса в поле.

  

Подсказки, когда они нужны

Образец заполнения (или «водяной знак») – готовый ответ на вопрос пользователя «что вводить в это поле?». Более сложные поля или поля, заполнение которых часто вызывает вопросы, можно снабдить подсказками.

• JTip – позволяет добавить динамические подсказки к полям в форме. Изначально все подсказки свернуты и появляются только при наведении на специальный значок рядом с полем.

  

• Input Floating Hint Box – добавляет подсказки, автоматически появляющиеся при переходе в поля формы.

  

• jQuery Form Example Plugin – расставляет образцы заполнений в полях.

  

Выбор нескольких значений из длинного списка

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

• ASMSelect – реализация с помощью обычного выпадающего списка (в одном списке по очереди выбираются нужные значения).

  

• Geogoer VChecks – реализация с помощью набора чекбоксов.

  

• Custom Select Box – расширяет функциональность стандартного элемента, позволяя выбирать несколько значений без нажатия Ctrl.

  

Проверка надежности пароля

Можно наглядно показать пользователю, что его пароль никуда не годится.

• Password Strength Meter – простой плагин для проверки надежности пароля. На сайте разработчика подробно описан алгоритм, по которому рассчитывается надежность пароля.

  

• jQuery Password Strength Meter – расширение предыдущего плагина. Можно задавать и использовать свои стили для разных уровней надежности.

  

Подтверждения, автосохранение, отмена действий

C помощью плагинов к jQuery можно расширить стандартную функциональность web-форм.

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

  

• jQuery autoSave – автоматическое сохранение формы. При заполнении больших форм не просто полезно, а очень полезно.

  

• Undo Made Easy – плагин от автора статьи «Не используйте предупреждения, если есть возможность отменить действие». Реализует возможность отмены последних действий пользователя.

  

• 24.02.2009
• Категории: Статьи
• Комментарии: 4