Проверка формы без перезагрузки на JavaScript

Дата публикации: 13-03-2013

Чтобы иметь доступ к просмотру всех уроков этого курса, оформите подписку в премиум раздел
Звездный рейтинг статей для сайта

От автора: в данном уроке мы научимся проверять данные полей формы без перезагрузки страницы. Для этой цели мы воспользуемся методом ajax библиотеки jQuery. Где может пригодиться подобная реализация? Полагаю, Вы неоднократно могли уже наблюдать ее на просторах сети.

Нередко этот способ используют при регистрации новых пользователей. Когда регистрируется новый пользователь - он обязательно вводит желаемый логин, под которым будет посещать сайт. При этом необходимо проверить, как минимум, нет ли у нас на сайте уже пользователя с таким логином. Чтобы не усложнять пользователю процесс регистрации, как раз и пригодится проверка введенного логина на уникальность асинхронно.

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

lesson

Все уроки курса:

Метки: ,

Комментарии (2)

  1. graff99@gmail.com

    Андрей, спасибо за наглядный урок!
    Но есть одно но… Как привязать кнопку «Отправить» с скрипту проверки формы?
    Сделать кнопку не активной, пока не заполнена вся форма? Но если логин или email
    уже есть в БД, а пользователем нажмет кнопку «Отправить» с занятыми полями? Проверять их снова?
    Не пинайте меня меня сильно — я только учусь. Но нужна хотя-бы идея, как связать
    кнопку и скрипт вместе. Так-сказать, общее направление для дальнейшей работы мысли…

    • Андрей Кудлай

      Относительно первого вопроса — для этого есть метод submit(), который связан с отправкой формы и в котором можно проверить поля формы перед отправкой. Больше можно посмотреть, к примеру, в этом уроке.
      Для того, чтобы заблокировать кнопку, достаточно установить для нее атрибут disabled, вот пример.
      Относительно последнего вопроса. Если логин и email уже заняты, тогда скрипт сообщит об этом. Если нужно очистить поля после этого, тогда здесь поможет метод val(). Очистить поле можно, передав в метод пустую строку: $(inputId).val(»);

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree