Как сделать проверку полей формы

Валидация или проверка полей формы на ошибки и заполнение

2020-02-09
- 30
- Апреля
  2017

Доброго времени суток. 🙂

В этой статье хочу рассказать вам о том, как сделать проверку полей формы на заполнение. В итоге у нас получится валидация формы с помощью jQuery. Многие делают на чистом PHP в самом обработчике, но иногда такой метод не подходит. Например, в случаи, когда вы захотите проверять форму до перезагрузки страницы. Вдруг вам не нужно обновления страницы и вы хотите вывести сообщение об ошибке, чтобы человек исправил, а уже потом произошла отправка и обновление страницы. Конечно можно еще использовать метод с AJAX, но это уже совсем другая история 🙂

Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты – e-mail. Ниже я покажу два варианта скриптов с проверкой правильности почты и без нее.

Как видите, пока все поля не будут заполнены, скрипт не даст отправить форму, к тому же в поле для e-mail должен быть введен корректный адрес. Для начала я покажу как сделать простую проверку на заполненность полей без проверки e-mail. Вдруг в вашей форме нет этого поля и вам нужно проверить просто текстовое поле, чтобы оно не было пустое и на почту не приходили пустые уведомления.

Для осуществления задуманного, нам нужно для начала создать саму форму. У Вас она уже может быть, если вы захотите данный материал внедрить в нее, нужно будет его адаптировать под вашу форму. Я же покажу все на своем примере. Моя форма ничего не будет отправлять, в этой статье нет обработчика для отправки писем, чтобы не усложнять материал. Обработчик отправки писем, это другая история. Для начала сам HTML код формы.

По коду видно, что наша форма состоит из трех полей – имя, почта и тестовое поле. Есть еще несколько важных моментов, которые понадобятся в любом случаи для правильной работы скрипта. Давайте разберем по-порядку.

id=”file_form” – айди для нашей формы. ID – обязателен, он будет тоже использоваться в скрипте.

Теперь, чтобы придать нормальный внешний вид нашей форме, добавим немного CSS стилей.Если вы будете использовать их на своем сайте, то добавьте их в свой файл стилей.

Данный стили задают параметры для самой формы, полей, кнопки. Расписывать все строчки, каждая для чего – не буду, для этого есть учебники по CSS. Распишу лишь два самых основных.

#messenger – это стили для того самого блока с выводом сообщений. Главный параметр для этого класса – это display:none. Тоесть мы изначально скрываем блок.
.notvalid – это стили для класса, который будет присваиваться нашим скриптом к тому полю, что не заполнено или заполнено не корректно. Об этом классе я еще раз упомяну ниже.

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

Так как наш скрипт работает с помощью jQuery, нужно чтобы была подключена библиотека jQuery. Если она не подключена ранее, сделайте это, добавив вот такую строку:

Куда и как правильнее добавлять библиотеку, вы можете прочитать в статье – Как и где подключить скрипт?.

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

Давайте рассмотрим основные элементы нашей функции из скрипта.

frmotpr() – вторая строка, название функции. Это название должно совпадать с называнием внутри нашего события onclick, что мы добавили кнопке ОТПРАВИТЬ.
(“name_f”, “contact_f”, “mssg_f”) – в третей строке в кавычках, через запятую мы указываем ID наших полей ввода, что обязательны к заполнению. Я ввел все три. Вы можете ограничится одним или двумя или десятком, если у вас будет много полей.
$(“#file_form”).submit – в четвертой строке указываем ID нашей формы и то что функция будет срабатывать когда мы нажмем на кнопку submit этой самой формы.
error=0; – код ошибки, а вернее ее отсутствие.
$(“#file_form”).find(“:input”) – проверяем все поля ввода input нашей формы на заполнение.
Далее идет проверка на заполненность в результате чего срабатывает условие для вывода сообщения об ошибке.
$(this).addClass(“notvalid”); – в итоге, если поле не заполнено то ему присваивается класс – notvalid. Для которого мы присвоили в стилях определенные параметры, а точнее неправильно заполненное поле, будет становиться красным.
$(this).removeClass(“notvalid”); – если поле правильно заполнено – удаляем класс notvalid.
if(error==0) <– далее мы проверяем что у нас вышло в итоге. и если код ошибки 0 – то есть ошибки отсутствуют, мы переходим к следующему пункту:
return true; – разрешаем сработать нашей форме и отправить данные. Например через action. Так же в это место вы можете добавлять AJAX функцию для отправки письма или ще что-то что нужно выполнить если фсе поля заполнены. тут ограничивается вашей фантазией.
>else < var err_text = "";-далее условие, что в противном случаи, если есть ошибки, мы создаем переменную err_text и задаем ей пока что пустое значение.
if(error==1) err_text=”Не все обязательные поля заполнены!”; – Если код ошибки 1, то есть одно или несколько полей не заполнены, мы присваиваем переменной err_text – текст Не все обязательные поля заполнены!.
$(“#messenger”).html(err_text); – наш текст ошибки вставляем в тот самый блок для ошибок – messenger.
(“#messenger”).fadeIn(“slow”); – далее показываем с легкой анимацией наш блок, который мы стилями выше скрыли. Если было пустое поле вы увидите после нажатия на кнопку сообщение об ошибке.
return false; – запрещаем отправку формы и возвращаемся к началу. перед этой строкой можете тоже добавить какие-то задачи или функции, которые хотите.

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

Теперь давайте рассмотрим версию скрипта, которая помимо проверки на заполнение, будет еще и проверять корректно ли введен e-mail.

Сам скрипт очень похож, добавлена просто еще функция и пару новых строк:

Собственно, рассмотрим новые строки

function isValidEmailAddress(emailAddress) – последние 4 строки скрипта это функция валидации для e-mail. Особо разбирать там нечего она нужна для проверки и участвует в условиях из основной функции. Я ее упоминаю в самом начале, дабы потом ссылаясь на нее было понятно.
var email = $(“#contact_f”).val(); – эти строки выше. Создаем переменную email и указываем айди нашего поля для почты – contact_f.
if(!isValidEmailAddress(email)) <– создаем условие, что если наша функция по проверке выявила ошибку, присваиваем ошибке новый код.
error=2; – присваиваем ошибке код 2.
$(“#contact_f”).addClass(“notvalid”); – полю e-mail присваиваем наш класс ошибки notvalid.
if(error==2) err_text=”Введен не корректный e-mail!”; – эта строка добавилась в то место, где мы присваиваем переменной err_text – текст. Данная строка указывает, что если код ошибки 2, то есть некорректный e-mail, выведется текст – Введен не корректный e-mail!

Все остальное же, осталось без изменений. Сравните скрипты и разберетесь где и что отличается. Я постарался подробно расписать, думаю проблем не должно возникнуть. Мой пример из начала статьи как раз основан уже на втором скрипте.

Как и писал ранее, адаптируйте скрипт под свою форму, указывайте правильно айди формы и полей, не забудьте про событие у кнопки отправления формы, блок дла вывода сообщения и стили для этого блока и поля с ошибкой. Если постараетесь у вас все получится. Многовато текста получилось, так что будем заканчивать.

На этом все, спасибо за внимание. 🙂

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

Проверка заполнения формы с использованием JavaScript

Данный урок описывает, как создать JavaScript форму, которая проверяет правильность заполнения посетителем полей перед отправкой данных на сервер. Сначала мы объясним, почему проверка заполнения формы является полезной методикой, а затем построим простой пример с объяснением, как все происходит.

Зачем нужна проверка заполнения формы?

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

Существует два основных метода для проверки заполнения формы: на стороне сервера (с использованием CGI скриптов, ASP и т.д.) и на стороне клиента (обычно используется JavaScript). Проверка на стороне сервера более безопасная, но в большинстве случаев требует более сложного кода, в то время как проверка на стороне клиента выполняется проще и быстрее (браузер не нуждается в соединении с сервером для проверки заполнения формы, таким образом, пользователь получает немедленный ответ в случае пропущенных полей, которые необходимо заполнить).

Проверка формы на стороне клиента. Обычно выполняется с помощью встроенного JavaScript скрипта.

Проверка формы на стороне сервера. Обычно выполняется с помощью CGI или ASP скрипта.

В данном уроке мы построим простую форму с проверкой на стороне клиента с помощью JavaScript. Вы сможете затем адаптировать ее под свои нужды.

Простая форма с проверкой.

Давайте построим простую форму с проверкой заполнения с помощью скрипта. Данная форма имеет одно текстовое поле “Ваше имя” и кнопку для отправки данных. Наш скрипт проверяет, что пользователь ввел свое имя перед тем, как отправить данные на сервер.

Откройте форму и посмотрите в действии. Попробуйте нажать кнопку “Отправить данные” ничего не вводя в поле “Ваше имя”.

Вы также можете открыть исходный код формы в другом окне, чтобы было удобно работать с уроком.

Страница содержит функцию JavaScript, которая называется validate_form(). Она выполняет проверку заполнения формы. давайте посмотрим сначала на форму.

Форма

Первая часть формы – тэг form

Функция validate_form()

Функция проверки формы validate_form() встроена в секцию head вначале страницы:

Проверка формы jQuery

Здравствуйте, уважаемые читатели блога LifeExample, в статье “Проверка формы jQuery“, хочу посветить немного времени на разработку одной очень нужной составляющей любого сайта. Говорить сегодня мы будем, о том, что такое проверка формы на заполнение, какими бывают проверки и как реализовать проверку формы на jQuery.

Для начала выясним, что же такое форма. В данном контексте под словом форма, мы будем понимать HTML элемент страницы FORM. Формой в HTML является совокупность элементов позволяющих пользователю изменить их содержимое, и отправить данные на сервер. Такими элементами могут являться:

Поля ввода (text,textarea);
Чекбоксы (checkbox);
Радиокнопки (radiobutton);
Выпадающие списки (select).

Какими бывают формы

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

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

Форма регистрации;
Форма авторизации;
Форма обратной связи;

Согласитесь, что это очень распространённые элементы любого сайта, и сложно встретить тот ресурс, на котором бы не было данных форм.

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

Проверке формы на корректность введенного e-mail;
Проверке формы на совпадение паролей;
Проверке формы по типу введенных данных (числовое поле);

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

Кстати говоря, о проверке формы на jQuery, стоит заметить, что это не очень безопасное занятие, в том случае если оно не поддерживается контрольной проверкой на стороне сервера.

Я имею в виду такую ситуацию. Представим, что данные введенные пользователем проверяются только jQuery и JavaScript’ом на стороне клиента, в этом случае какой бы хорошей не была проверка, всегда можно скопировать код формы страницы, и вручную послать любые не проверенные данные, в которых может запросто содержаться sql-инъекция. Поэтому я рекомендую реализовать еще и проверку полученных данных на PHP, это не только защитит вас от возможных атак, но и даст возможность работать с сайтом пользователям, у которых отключен JavaScript.

Ну, все хватит воды, давайте выделим основные задачи, и приступим к их выполнению.
Главная цель: Проверка формы jquery.

Задачи:

Создать HTML форму;
Форма должна содержать большое количество разных по назначению полей;
Написать скрипт-валидатор с использованием jQuery библиотеки.

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