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

После того как вы сверстали свою форму, вам необходимо проверить корректность введенных данных, или же — соответствие определенному формату. Чуть ниже, вы научитесь писать простую валидацию на jQuery.

Как проверить введенное имя, телефон или email

Предположим, что у вас уже есть форма:

Обратите внимание на следующие вещи:

  • каждому элементу input был задан класс input-name, input-phone, input-email;
  • у поля ввода почтового ящика уже стоит «тип» = емейл — и в принципе, этого хватает, чтобы вам не присылали спам (и хотя данный тип был введен относительно давно, старые браузеры его не поймут);
  • на всех полях стоят placeholder — текст, который будут отображаться, если поле пустое;
  • у первых 2 форм стоит атрибут required — что означает обязательный, как минимум один символ должен быть заполнен в строке.

Для начала пишем простую валидацию для нашего имени:

Идем дальше — теперь мы будем проверять телефон. В принципе, вы можете просто запретить ввод любых символов кроме цифр, и опять же поставить ограничение на количество символов. В данном примере, используем регулярные выражения:

Если вам понадобится скрипт который запрещает вводить любые символы кроме цифр, дайте мне об этом знать в комментариях.
Осталось написать валидацию для email поля. И хотя у нас type = email, подстраховаться никогда не бывает лишним:

Обратите внимание — в условии стоит ИЛИ, это важный момент.
В принципе, это всё, что я хотел рассказать в этой небольшой статье 🙂 . А какие методы для валидации полей применяете вы?

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года.Предоставляю услуги по созданию проектов на CMS 1С-Битрикс — сайты, шаблоны и компоненты с нуля, а также доработка функционала на уже существующих проектах.


Другие виды работ:

— Вёрстка макетов (HTML, CSS, JavaScript, jQuery, JADE, SASS, Gulp);

— Натяжка вёрстки на 1С-Битрикс;

— Скрипты на PHP и JS (jQuery);

— Парсинг (CSV, XML, XLSX, JSON);

— Интеграции со сторонними сервисами по API;

— Многоязычные версии сайтов;

— и многое другое :)


Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.

E-mail: dmitriyribka@gmail.com

Skype: cinemacreaterus


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

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