Как сделать проверку заполнения формы css

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

Плагины и Шаблоны для WordPress

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

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

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

Пример

Плагины и Шаблоны для WordPress

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

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

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

  • id="file_form" — айди для нашей формы. ID — обязателен, он будет тоже использоваться в скрипте.
  • <div — обязательный блок. Это контейнер для вывода сообщений об ошибке от скрипта. данный блок можно разместить и вне формы. Задать ему любые стили. В примере, это тот красный текст, что сообщает об незаполненном поле.
  • onclick="frmotpr();" — событие, которое будет запускать функцию из нашего скрипта, при нажатии на кнопку. Данное событие добавлено к кнопке ОТПРАВИТЬ. Предпоследняя строка в коде.
  • Всем полям тоже присвоены ID и классы. Они тоже понадобятся для нашего скрипта валидации. ID для поля с e-mail особенно важен для нашего будущего скрипта, что будет проверять правильность введенного e-mail.

Теперь, чтобы придать нормальный внешний вид нашей форме, добавим немного 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!

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

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

На этом все, спасибо за внимание. &#128578;

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

Проверка формы "на лету"

В этом уроке мы рассмотрим эффект проверки правильности заполения формы "на лету", т.е. без перезагрузки страницы.

demosourse

Шаг 1.

Подключим необходимые скрипты и таблицу стилей формы:

Если хотите, чтобы форма выглядела, как в нашем примере, то можете подключить еще один стиль (он также есть в исходниках):

Шаг 2.

Далее просто вставляем форму с классом formular (если вы будете использовать свою таблицу стилей, то класс, конечно, может быть другой: тот, который нужен Вам), в параметре action прописываем файл-обработчик (в нашем примере он отсутствует)

Шаг 3.

В эту форму прописываем необходимые поля, выставляя каждому из них необходимый класс. Например:

Или вот еще один пример, проверяющий правильность введения адреса электронной почты, а также совпадения полей с ней:

Вот расшифровка подобных классов:

required: Проверка поля
length[0,100] : Между x и x символами
minCheckbox[7] : Максимально позволенное количество чекбоксов
confirm[fieldID] : Совпадает ли с другим полем ( например проверка пароля)
telephone : Проверка телефонного номера
email : Проверка правильности введения адреса электронной почты
onlyNumber : В поле должны быть только цифры
noSpecialCaracters : В поле не должно быть специальных символов
onlyLetter : В поле должны присутствовать только буквы.

Шаг 4.

Если Вам не нравится русификация этого скрипта (русифицировал его я сам), то можете поменять значения команд проверки на свои в файле jquery.validationEngine.js. Но потом обязательно сохраните его в формате UTF-8! Иначе русские символы не будут отображаться!

Вот и все! Спасибо за внимание и пусть Ваши формы всегда заполняют правильно!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.position-absolute.com
Перевел: Сергей Патин
Урок создан: 3 Июня 2009
Просмотров: 121430
Правила перепечатки

5 последних уроков рубрики "jQuery"

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Валидация форм на HTML и CSS

Workafrolic (±∞)

Вы можете добиться внушительных результатов в вопросе проверки форм исключительно при помощи HTML-атрибутов. Вы можете сделать пользовательский опыт простым и понятным при помощи CSS-селекторов. Но вам потребуется несколько трюков, чтобы все получилось правильно!

(Вы можете) сделать label похожим на placeholder

Во-первых: всегда используйте настоящий элемент <label for=”correct_input”>. Игнорирование одного этого правила из соображений UX портит очень много форм. Плейсхолдер — всего лишь подсказка того, как должна выглядеть валидная информация в поле ввода, типа “введи Москва в поле под названием Город”.

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

Используем <div> для позиционирования и размещения названия поля непосредственно поверх самого поля.

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

Фишка в том, чтобы поставить поле ввода первым (семантически допустимо). Таким образом вы сможете скрывать label при фокусе:

Сделайте определенные поля обязательными

Пожалуй, самым простым способом проверки формы является использование атрибута required. Нет более быстрого пути отлова ошибок, кроме как позволить браузеру сделать это самому!

Подсвечивайте верно заполненные поля

Дайте пользователю знать, что поле было заполнено верно. Браузер может предоставить нам эту информацию по CSS-псевдоклассу :valid.

:valid в этом случае показывает, что выполнено условие required. Но селектор так же подойдет для проверки данных по типу поля.

Покажите напоминание о виде вводимых данных

Вы также можете установить определенное требуемое значение. Вроде email или number. Здесь перечислены все возможные варианты.

Это поле является обязательным для заполнения и вводимая информация будет проверяться на соответствие адресу электронной почты. Давайте улучшим UX:

  1. Сообщим пользователю о требуемом формате, когда фокус находится в поле ввода
  2. Напомним ему, если введенные данные не будут валидными

Но еще… не показывайте никаких подсказок, если поле пустое. И не считайте его неверно заполненным. Это может создать ощущение назойливости и будет только раздражать. Для того, чтобы соблюсти эту рекомендацию, мы должны будем узнать, пустое поле или нет.

Проверяем заполнено поле или нет

Мы хотим провернуть фокус с :valid и :invalid, но мы не хотим опережать события и считать поле невалидным до того, как оно было заполнено.

Есть ли CSS-селектор для проверки пустоты поля? Вообще-то нет! Вы можете подумать на :empty, но ошибетесь. Этот псевдокласс предназначен для проверки ситуаций когда элемент <p></p> не содержит в себе ничего. Поля ввода и так пусты по умолчанию.

Трюк в том, чтобы проверить поле на видимость атрибута placeholder:

Мы не использовали плейсхолдер в нашем примере, но это правило сработает, если мы зададим значение из одного пробела:

:placeholder-shown супер полезен для нас! Это в целом секретный селектор, позволяющий проверить, есть ли в поле значение или нет.

IE и Firefox пока не поддерживают его, что немного осложняет задачу. Обычно спасителем является новая функция @supports, но…

Вы не можете использовать @supports для селекторов, только для свойства/значения (например @supports (display: flex)).

Проверить плейсхолдер при помощи JavaScript довольно легко:

Но это не кажется самым простым способом имитации :placeholder-shown. Поэтому…возможно, просто стоит подождать поддержки всеми браузерами.

Представим, что поддержка уже повсеместная и посмотрим, как это будет выглядеть…

Вы можете создать более сильную проверку

Это уже не просто required или type=”email” (и подобные). Вы можете проверить на клиентской стороне такие вещи, как длину (например минимальную длину пароля или максимальное количество символов в <textarea>) и даже использовать полноценное регулярное выражение.

Вот статья об этом. Скажем, вы хотите проверку пароля по параметрам:

  • Состоит из 6 символов
  • Содержит хотя бы одну прописную букву
  • Содержит хотя бы одну строчную букву
  • Содержит хотя бы одну цифру

Вы можете это сделать следующим образом:

Я оставил в этом примере :placeholder-shown, так что в Firefox и IE может работать не очень хорошо. Это просто пример! Не стесняйтесь брать по частям или менять под свои нужды.

P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

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

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