jQuery Ajax отправка формы Часть 2

Узнав, какие события есть при отправке формы, добавим простейшую валидацию и очистку формы после отправки.

Как добавить простую валидацию формы на jQuery

Первая часть статьи про события успеха и ошибки рекомендуется к прочтению. Теперь приступим к изучению кода.

HTML формы:

Также, добавляем в CSS стиль для ошибки:

И переходим плавно к jQuery:

В чем плюс данного кода? Он универсален и можно повесить для нескольких форм сразу, ведь обработчик берется из action. Для обязательного класса служит inp-req. В качестве ошибок выводятся стандартные алерты браузера, но вы конечно можете их заменить на что-то покрасивее на свое усмотрение 🙂 .

Обратите внимание на строчку
$form[0].reset();
После успешной отправки сбрасываются все значения данной формы.

Ну и конечно стоит сказать про валидацию — ее здесь почти нет :). Проверка на пустое поле (false) — это никуда не годится, и для формы нужно проверять хотя бы кол-во символов, для телефона числа. Также можно добавить скрипт на «маску» для телефона, и валидацию емейла при помощи регулярного выражения. И не забывайте про защиту от спама, которую нужно делать не только на клиентской стороне но и на серверной.

А что вы используете во всех своих формах? Поделитесь об этом в комментариях с остальными, спасибо за внимание 😉 .

Если на вашем проекте необходимо настроить AJAX формы или другие скрипты, обращайтесь

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

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