Ajax Russia : Аякс по-русски

Свежие новости из мира IT

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

August 24th, 2007 | Category: CSS, Javascript | Автор: Александр

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

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

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

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

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

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

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

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

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

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

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

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

del.icio.us Забобрить!

3 Comments so far

  1. Dumay September 11th, 2007 06:25

    Не работает если INPUT в

    Nick:

    Пароль:

    таких вот TD TR стоят!
    в топку этот спосов :( :\

  2. eregilkibly December 5th, 2007 11:39

    Complimenti.. Sei entrato nel piu’ completo Portale sulle Medicine Alternative, Biologico Naturali e Spirituali - Leggi, Studia, Pratica e starai in Perfetta Salute, senza Vendita Cialis, Viagra Generico on line; Comprare Tad
    alafil, Sildenafil in online farmacia Muladhara-SPE Salus Per Exercitatione. Impotenza Impotenza. X-man May 25, 2007, 22:14 . e tantissimi altri chiedi info im potenza scelti a seconda delle problematiche della persona in questione impotenza che occorre Sito web dell’Universita degli Studi di Pavia, Facolta di Farmacia Universita degli Studi di Pavia Facolta di Farmacia. Benvenuti nel nuovo sito della Facolta di Farmacia dove vendita cialis on line

  3. Slip April 7th, 2008 17:44

    А как добавить туда обработчик какой-нибудь,чтобы проверял на наличие такого юзера в базе

Leave a reply