Проверка полей на заполнение javascript. Проверка введенных данных на JavaScript, отправка заполненной формы на почту
В нашем примере у нас 5 полей, которые необходимо заполнить:- имя
- сообщение
- контактный телефон
- контрольное число для защиты
Помимо простой проверки на пустоту поля, мы покажем
как проверить правильно ли введен e-mail и телефонПроверять поля мы будем с помощью JavaScript. В последнее поле необходимо ввести определенное число (для защиты от автоматического заполнения). Если поля будут пустыми, появится alert-окно с уведомлением. К данному скрипту мы сразу прибавили отправку заполненной формы на почту, делать мы это будет с помощью php.
Итак, создаем файл index.php
и пишем туда следующую форму:
1. Ваше имя:
2. Сообщение:
3. E-Mail
3. Введите сумму 10+10
Создаем файл data.js
, пишем в него код проверки:
function Formdata(data){
/* если не заполнено поле Ваше имя, длина менее 3-x*/
if (data.fnm != null && data.fnm.value.length < 3)
{
alert("Заполните поле "Ваше имя"");
return false;}
/* если не заполнено поле Сообщение */
if (data.text != null && data.text.value.length < 3)
{
alert("Заполните поле "Сообщение"");
return false;}
/* e-mail Юзера */
if(data.email != null && data.email.value.length == 0)
{
alert("поле "E-Mail" пустое");
return false;}
if(data.email != null && data.email.value.length < 6)
{
alert("слишком короткий "E-Mail"");
return false;}
if(!(/^w+[-_.]*w+@w+-?w+.{2,4}$/.test(data.email.value)))
{
alert("Введите правильный E-Mail адрес");
return false;}
/* контактный телефон */
if(data.phone != null && data.phone.value.length == 0)
{
alert("поле "Контактный телефон" пустое");
return false;}
if(data.phone != null && data.phone.value.length < 5)
{
alert("поле "Контактный телефон" должно содержать минимум пять символов");
return false;}
if(!(/^+z/.test(data.phone.value+"z")))
{
alert(""Контактный телефон" указан неверно");
return false;}
/* делаем чтобы поле сумма было равно определенному числу */
number = document.getElementById("summa");
if (number.value !== "20")
{
alert(""Сумма" не введена или введена неверно");
return false;}
}
Подгружаем данный файл в наш документ, помещаем его между тегами head:
Вот и готова наша проверка. Теперь после того, как все данные введены отправляем нашу форму нам на почту.
В файл index.php
пишем php-код:
Немножко истории…
Вчера я работал над одним заказом, точнее дорабатывал его. В админке WordPress я создал поля для вставки телефонов, адресов и т.д.
Заказчик попросил к полям формы сделать еще проверку на заполнение проверки формы, чтобы пользователи не могли отправлять их пустыми. Все это можно было сделать простым методом проверки полей через HTML5. Но такой способ мне не подходил.
Стал я думать над этим вопросом, и решение пришло! Можно осуществить проверку на заполнение полей формы с помощью JQuery Validation
. Этот способ можно использовать на любых движках, сайтах и т.д.
Итак, плагин JQuery Validation
проверяет поля формы на созданные вами правила и, если есть не соответствие, выводит динамические ошибки, которые сделал пользователь при заполнении формы.
Приступим к созданию формы.
Ваше Имя:
Ваш пароль:
Обратите внимание на id="myform-1 " , name="login " , name="password " . Эти названия я буду использовать, когда буду создавать правила проверки формы. Вы по желанию можете назвать своими именами.
Вставьте этот код между тегами :
Разберем немного код.
Пункт №3
.
$("#myform-1").validate({
«myform-1» – это название формы и взято оно здесь:
Пункт №5.
rules:{
– означает правила. Здесь нужно писать правила для полей между скобками rules:{ }
Пункт №7.
login:{ – здесь создаем правила для поля «Имя». Взяли имя поля из формы
Правила пишем через запятую между скобками login:{ }
Пункт №13 .
password:{ – здесь создаем правила для поля с паролем. Взяли имя поля из формы
Правила пишем через запятую между скобками password:{ }
Пункт №20 .
messages:{ – здесь выводим для каждого правила и для каждого поля сообщение об ошибке.
В коде я написал к каждому пункту подсказки, так что проблем, я думаю, быть не должно.
Для заметок:
Вот так выглядит шаблон файла для создания правил - «myscriptspravil.js »:
$(document).ready(function(){ $("#название формы").validate({ rules:{ // здесь пишем правила }, messages:{ // здесь сообщение } }); });
Список правил :
required - поле обязательное для заполнения (true или false)
email - проверяет корректность e-mail адреса (true или false)
url - проверяет корректность url адреса (true или false)
date - проверка корректности даты (true или false)
dateISO - проверка корректности даты ISO (true или false)
digits - только цифры (true или false)
maxlength - максимальное кол-во символов
minlength - минимальное кол-во символов
rangelength - кол-во символов от и до (rangelength: )
range - число должно быть в диапазоне от и до (range: )
max - максимальное значение числа
min - минимальное значение числа
Можете посмотреть документацию по плагину и по правилам .
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓Получай обновления блога!!! Подпишись:
Популярные статьи:
18 Ответов на комментарий - Проверка заполнения полей формы с помощью jQuery
ухх, понимаю что тема нужная. И мне требуется, чтоб при регистрации роботы отсеивались, но как это встроить – мне не по зубам. Вижу эти крестики-нолики и глаза в кучу сразу…
Людмила, я могу чем-то помочь?
Людмила Лао отвечает:
03.07.2015 в 09:16
самая основная проблема с ботами которая меня беспокоит, это их регистрация у меня на сайте. Я и программу ограничения поставила, и дополнительные поля ввела, а им всё ни по чем.
Зачем Вам на блоге нужна регистрация?
Попробуйте поставить капчу.
Людмила Лао отвечает:
03.07.2015 в 10:20
у меня установлена невидимая капча. спасает от спам-комментариев, но не помогает от регистрации…
а еще – как вообще можно убрать пункт регистрации из доступа?
мне периодически она только нужна, вот, недавно приняла нового автора на сайт. Так же в дальнейшем нужен будет редактор.
В админке, перейдите “Настройки” => “Общие” и уберите птичку над пунктом “Членство” (Любой может зарегистрироваться).
Нового автора или редактора можно добавить вручную. “Пользователи” => “Добавить нового”.
Чтобы забрать на блоге блок регистрации и входа, нужно зайти во “внешний вид” => “виджеты” и убрать блок “Мета”.
Напишите, Людмила, если получили полный ответ на вопрос?! И обязательно напишите, решилась ли ваша проблема!
Людмила Лао отвечает:
03.07.2015 в 12:44
Степан!
Ё п р с т)) забыла совсем про эту злосчастную галочку, спасибо!! Виджет убирать не хочу, т.к. сама через него захожу, а в остальном, еще раз целую!!! Решили мою проблему, легко и просто. Ато замучилась удалять этих ботов. набивается за раз от 10 до 60.
Здравсвуйте! Вот.. сделал всё как Вы тут написали, но у меня ничего на траничке не происходит.. не знаю,в чем проблема, помогите, пожалуйста.
Я вот только не могу понять, зачем для проверки формы тащить на страницу 3 библиотеки, если нативным JS это делается в три строчки, да и кроме этого input’ы в html5 давно уже поддерживает атрибуты required и pattern?
Да хоть и одну. Какой смысл? Библиотеки, а тем более фреймворки, можно (но не обязательно нужно) использовать тогда и только тогда, когда их РАЗЛИЧНЫЙ функционал будет востребован более 2-3 раз за один вызов.
Это одно из “золотых правил” программизма, как и то, что код нужно выносить в функцию тогда, когда он используется больше одного раза.
Относительно required, pattern и иных html ограничителей input’ов.
Ну, немного не то в визуальном плане, но функцию они выполняют абсолютно точно такую же – не дают пользователю ввести некорректные данные. Хотя, как мне кажется, принципиального отличия в том, что сообщение будет показываться во вплывающем окошке или в поле рядом с блоком, нету. А вот на производительность подключение библиотеки влияет.
А вообще, первоначальный посыл был к нативному JS, где валидацию одного поля и вывод сообщения можно сделать “в одну строку”.
В псевдокоде это выглядит примерно так:
InputBlock.onaction do if(inputBlock.inner == pattern) messageBlock.inner = "message_text"; end
одна из реализаций на JS:
Document.querySelector("input").onchange = function(){ if(this.value.match(/{4,}/g)) document.querySelector("label").innerHTML = "Логин должен быть не короче 4-х символов и состоять только из A-z, А-яб 0-9, точки и дефиса"; }
Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты - e-mail. Ниже я покажу два варианта скриптов с проверкой правильности почты и без нее.
Как видите, пока все поля не будут заполнены, скрипт не даст отправить форму, к тому же в поле для e-mail должен быть введен корректный адрес. Для начала я покажу как сделать простую проверку на заполненность полей без проверки e-mail. Вдруг в вашей форме нет этого поля и вам нужно проверить просто текстовое поле, чтобы оно не было пустое и на почту не приходили пустые уведомления.
Для осуществления задуманного, нам нужно для начала создать саму форму. У Вас она уже может быть, если вы захотите данный материал внедрить в нее, нужно будет его адаптировать под вашу форму. Я же покажу все на своем примере. Моя форма ничего не будет отправлять, в этой статье нет обработчика для отправки писем, чтобы не усложнять материал. Обработчик отправки писем, это другая история. Для начала сам HTML код формы.
По коду видно, что наша форма состоит из трех полей - имя, почта и тестовое поле. Есть еще несколько важных моментов, которые понадобятся в любом случаи для правильной работы скрипта. Давайте разберем по-порядку.
- id="file_form" - айди для нашей формы. ID - обязателен, он будет тоже использоваться в скрипте.
- - обязательный блок. Это контейнер для вывода сообщений об ошибке от скрипта. данный блок можно разместить и вне формы. Задать ему любые стили. В примере, это тот красный текст, что сообщает об незаполненном поле.
- onclick="frmotpr();" - событие, которое будет запускать функцию из нашего скрипта, при нажатии на кнопку. Данное событие добавлено к кнопке ОТПРАВИТЬ . Предпоследняя строка в коде.
- Всем полям тоже присвоены ID и классы. Они тоже понадобятся для нашего скрипта валидации. ID для поля с e-mail особенно важен для нашего будущего скрипта, что будет проверять правильность введенного e-mail.
Теперь, чтобы придать нормальный внешний вид нашей форме, добавим немного CSS стилей.Если вы будете использовать их на своем сайте, то добавьте их в свой файл стилей.
#file_form{ width:300px; background:#fff; padding:15px; margin:3px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; box-shadow:0 0 10px rgba(0,0,0,.1); border:1px solid #36c; } .in_pl{ width:90%; margin-bottom:15px; padding:10px 15px; border-radius:25px; border:none; box-shadow:0 0 5px rgba(0,0,0,.2) inset; background:#fff; } .in_pl:focus{ background:#fff; } #sub_f{ padding:5px 15px; border:none; border-radius:25px; box-shadow:0 0 2px 1px rgba(0,0,0,.2); background:#36c; color:#fff; cursor:pointer; } #sub_f:hover{background:#333;} .fl_fr{ width:100%; text-align:center; font-size:15px; color:#333; cursor: pointer; border:none; margin-bottom:10px; } #messenger{ text-align:center; display:none; color:#f00; margin:15px 0; } .notvalid{background:rgba(255,0,0,.2);}
Данный стили задают параметры для самой формы, полей, кнопки. Расписывать все строчки, каждая для чего - не буду, для этого есть учебники по CSS. Распишу лишь два самых основных.
- #messenger - это стили для того самого блока с выводом сообщений. Главный параметр для этого класса - это display:none. Тоесть мы изначально скрываем блок.
- .notvalid - это стили для класса, который будет присваиваться нашим скриптом к тому полю, что не заполнено или заполнено не корректно. Об этом классе я еще раз упомяну ниже.
Теперь, когда у нас есть готовая форма или вы свою форму настроили соответственно моим указаниям, добавили ей айди, мои или свои, нужный блок и событие кнопки, можем приступить к подключению скрипта.
Так как наш скрипт работает с помощью jQuery , нужно чтобы была подключена библиотека jQuery. Если она не подключена ранее, сделайте это, добавив вот такую строку:
Куда и как правильнее добавлять библиотеку, вы можете прочитать в статье - .
После библиотеки, не перед ней, а именно после нужно уже подключать, наш долгожданный скрипт валидации формы. как и писал ранее, первым вариантом будет сначала скрипт проверки поле на заполнение, без проверки правильности введенной почты. Сам скрипт имеет следующий вид:
