Проверка HTML форм с помощью Prototype

На модерации Отложенный

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

Если пользователь ошибся при вводе данных - обязательно надо указать где именно он ошибся. Многие дизайнеры любят делать из сообщения об ошибке какое то произведение искусства и в конце концов пользователю не ясно, допустил ли он ошибку вообще. Программисты тоже иногда перебарщивают и выдают какой нибудь alert с сообщением типа "поле с id g234em1 заполнено неверно". Сидишь после этого и думаешь, где же это поле g234em1.

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

Но хватит теории, и приступим к практике. Использовать мы будем, уже в который раз, Prototype, Scriptaculous и новый в этот раз Validation скрипт от Andrew Tetlaw.

 

Подгружаем джаваскрипт и CSS, которые все есть в комплекте на сайте разработчика:

PLAIN TEXT HTML:
  • <script src="prototype.js" type="text/javascript"></script>
  • <script src="effects.js" type="text/javascript"></script>
  • <script src="validation.js" type="text/javascript"></script>
  • <link rel="stylesheet" type="text/css" href="style.css" />

    • Создаём HTML форму с единственным полем, в котором юзер должен будет ввести емайл.

    Обратите внимание, что у текстового поля class="required validate-email". Эти данные нужны для валидации и означают, что поле нельзя отправлять пустым, и что в поле должен быть правильный емайл адрес.

    PLAIN TEXT HTML:
  • <form id="form" action="" method="post" accept-charset="utf-8">
  •     <input type="text" class="required validate-email">
  •     <p><input type="submit" value="Continue &rarr;"></p>
  • </form>

    • И последнее что мы делаем - создаём Validator объект и говорим ему какую форму нужно, перед отправкой, проверить:

    PLAIN TEXT JavaScript:
  • <script type="text/javascript">
  •     new Validation('form');
  • </script>

    • Вот и всё. Результат можно посмотреть по этому адресу - Проверка форм с помощью Prototype

    Напоследок главное правило проверки форм - обязательно перепроверяйте данные на сервере! Хоть сейчас и шла речь о проверке форм на стороне клиента - подобной проверке доверять нельзя и обхитрить её очень легко.

    Digg this