Проверка 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 →"></p> </form> И последнее что мы делаем - создаём Validator объект и говорим ему какую форму нужно, перед отправкой, проверить:
PLAIN TEXT JavaScript:
<script type="text/javascript"> new Validation('form'); </script> Вот и всё. Результат можно посмотреть по этому адресу - Проверка форм с помощью Prototype
Напоследок главное правило проверки форм - обязательно перепроверяйте данные на сервере! Хоть сейчас и шла речь о проверке форм на стороне клиента - подобной проверке доверять нельзя и обхитрить её очень легко.
Digg this
Комментарии