Как написать простую валидацию формы на 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)
  • Скрипты на PHP и JS (jQuery)

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

E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

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