Проверка 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