Войти в аккаунт
Хотите наслаждаться полной версией, а также получить неограниченный доступ ко всем материалам?

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

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

     

    Источник: www.ajaxrussia.com

    {{ rating.votes_against }} {{ rating.rating }} {{ rating.votes_for }}

    Комментировать

    осталось 1800 символов
    Свернуть комментарии

    Все комментарии (0)

    ×
    Заявите о себе всем пользователям Макспарка!

    Заказав эту услугу, Вас смогут все увидеть в блоке "Макспаркеры рекомендуют" - тем самым Вы быстро найдете новых друзей, единомышленников, читателей, партнеров.

    Оплата данного размещения производится при помощи Ставок. Каждая купленная ставка позволяет на 1 час разместить рекламу в специальном блоке в правой колонке. В блок попадают три объявления с наибольшим количеством неизрасходованных ставок. По истечении периода в 1 час показа объявления, у него списывается 1 ставка.

    Сейчас для мгновенного попадания в этот блок нужно купить 1 ставку.

    Цена 10.00 MP
    Цена 40.00 MP
    Цена 70.00 MP
    Цена 120.00 MP
    Оплата

    К оплате 10.00 MP. У вас на счете 0 MP. Пополнить счет

    Войти как пользователь
    email
    {{ err }}
    Password
    {{ err }}
    captcha
    {{ err }}
    Обычная pегистрация

    Зарегистрированы в Newsland или Maxpark? Войти

    email
    {{ errors.email_error }}
    password
    {{ errors.password_error }}
    password
    {{ errors.confirm_password_error }}
    {{ errors.first_name_error }}
    {{ errors.last_name_error }}
    {{ errors.sex_error }}
    {{ errors.birth_date_error }}
    {{ errors.agree_to_terms_error }}
    Восстановление пароля
    email
    {{ errors.email }}
    Восстановление пароля
    Выбор аккаунта

    Указанные регистрационные данные повторяются на сайтах Newsland.com и Maxpark.com