Javascript проверка полей формы. Проверка формы на JavaScript
- имя
- сообщение
- контактный телефон
- контрольное число для защиты
Помимо простой проверки на пустоту поля, мы покажем
как проверить правильно ли введен 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-код:
Предположим, что у нас есть небольшая форма, состоящая из двух input-ов (text и password), textarea и кнопки отправки (input submit). Наша задача – непосредственно перед отправкой формы проверить два первых input и textarea на пустоту. Если пустых полей не будет, то форма должна отправляться. Если пустые поля будут, то их необходимо обвести красной рамкой, вывести сообщение в виде alert о том, что необходимо заполнить все поля, а затем запретить отправку формы. После того, как пользователь уберет alert, цвет рамки полей должен вернуться в изначальное состояние. Красиво оформить саму форму Вам поможет сайт Жеки Несмелова .
Для того, чтобы все работало, как надо, к событию onsubmit формы привяжем возвращаемое функцией send() значение. Данная функция будет возвращать true или false в зависимости от того, все ли поля заполнены. Если вернется false, то при нажатии на кнопку форма не отправится, если true – то отправится. Заметьте, что мы не задаем полям id (так их бы было гораздо проще выцепить через DOM-модель JavaScript).
Проверка заполненности полей формы на JavaScriptТеперь переходим к JavaScript-коду. Здесь будет две функции. Первая функция send() осуществляет непосредственную проверку. По значению переменной valid мы поймем, заполнены ли все поля после того, как проверка окончится. В elems помещаем все элементы первой формы (индекс = 0) нашего документа. Вместо 0 можно использовать, к примеру, имя формы в виде строки (если оно задано). Далее в цикле проходим по всем элементам данной формы, попутно проверяя, является ли текущий элемент textarea, либо input с type = text || password. Если это так, то проверяем значение value данного элемента. Ведь именно в value будет лежать текст, введенный пользователем. Если value = пустой строке, то присваиваем border-у элемента красный цвет, а переменную valid ставим в false. В самом конце после прохождения всех элементов проверяем valid. Если там false – выводим alert, запрещаем отправку формы и подсвечиваем красным лишь те поля, которые не заполнены. В противном случае отправляем форму.
Вторая функция в JavaScript-коде будет выполняться сразу после загрузки документа. При наведении курсора мыши на форму (событие onmouseover) в цикле начнется перебор всех ее элементов. Если у какого-либо из элементов CSS-свойство border = "2px solid red", то ему присваивается значение по умолчанию (красный цвет убирается).
На этом все. Осталось только красиво оформить вашу форму!
Оставь комментарий, нажми «Мне нравится » («Like ») и «Сохранить », а я напишу для тебя еще что-нибудь интересное:)
Очень часто возникает необходимость добавления формы на сайт, ведь форма - это самый популярный способ общения пользователя с сайтом, и очень важно, чтобы данные, ведённые пользователем были корректными. И чтобы форма была отправлена с верными данными необходимо её перед этим проверить. И вот проверкой формы в JavaScript мы и займёмся в этой статье.
Давайте для начала создадим форму, которую потом будем проверять:
Ваше имя:
Ваш пароль:
Ваш пол:
Выберите число:
1
2
3
Ваше сообщение:
Согласитесь с нашими правилами:
Загрузите файл:
Вот такая форма. Надеюсь, что с HTML Вы знакомы и объяснять, думаю, ничего не стоит. Если что-то непонятно, то посмотрите на работу этого кода в браузере.
Теперь поговорим о том, как получать значения из полей формы. Ведь прежде, чем их проверить, надо узнать, что написал там пользователь. Общий вид получения доступа к полю форму такой:
Document.имя_формы.имя_поля.value;
То есть сначала обращаемся к объекту Document , затем к его свойству Form (через имя формы), потом к имени поля данной формы, и, наконец, к значению поля . Давайте выведем все поля, которые подчиняются этому общему виду:
Var form = document.form1;
document.write(form.firstname.value + "
");
document.write(form.pass.value + "
");
document.write(form.number.value + "
");
document.write(form.message.value + "
");
document.write(form.rules.value + "
");
document.write(form.hidefield.value + "
");
document.write(form.fileupload.value + "
");
document.write(form.sub.value + "
");
document.write(form.but.value + "
");
Это все поля, которые имеют свойство value , и к которым можно получить доступ таким образом.
Теперь поговорим об одном особенном элементе формы - radio . Получим доступ к значению radio :
Var sex = (document.form1.sex.checked)?
document.form1.sex.value: document.form1.sex.value;
Обратите внимание, что у нас есть два элемента radio , которые находятся в массиве sex . Индексы у них 0 и 1 . В данном скрипте мы проверяем, если у нас первый элемент включён (checked ), то присваиваем значение первого элемента, иначе присваиваем значение второго элемента. Кстати, если кто не понял, то это такая конструкция оператора условия IF . Разумеется, можно было бы написать и так:
Var sex;
if (document.form1.sex.checked) sex = document.form1.sex.value;
else sex = document.form1.sex.value;
Теперь, когда мы получили доступ ко всем полям, давайте с Вами, наконец, сделаем проверку формы. Но сначала давайте добавим в тег атрибут "onSubmit " со значением "return check(); ". Данный атрибут будет делать следующее: перед отправкой формы вызывать функцию, которая должна будет вернуть либо true , либо false . Если она вернёт true , то форма отправится на сервер, а если false , то форма не будет отправлена.
Теперь создадим функцию check() , которая должна, во-первых, проверять полностью форму, сообщать пользователю об ошибках, а также возвращать true (если форма полностью правильная), либо false (если форма содержит ошибки).
Function check(form) {
var firstname = form.firstname.value;
var pass = form.pass.value;
var message = form.message.value;
var rules = form.rules.value;
var file = form.fileupload.value;
var bad = "";
if (firstname.length < 3)
bad += "Имя слишком короткое" + "\n";
if (firstname.length > 32)
bad += "Имя слишком длинное" + "\n";
if (pass.length < 3)
bad += "Пароль слишком короткий" + "\n";
if (pass.length > 32)
bad += "Пароль слишком длинный" + "\n";
if (message.length < 3)
bad += "Сообщение слишком короткое" + "\n";
if (rules != "on")
bad += "Вы не согласились с правилами" + "\n";
if (file.length == 0)
bad += "Вы не выбрали файл для загрузки" + "\n";
if (bad != "") {
bad = "Неверно заполнена форма:" + "\n" + bad;
alert(bad);
return false;
}
return true;
}
В данном скрипте мы сначала получаем все данные, нуждающиеся в проверке, и записываем их в переменные. Затем создаём переменную bad , в которую записываем все некорректные данные. Затем идёт целый набор IF , которые проверяют поля в форме и записывают все ошибки в переменную bad . Затем, если переменная bad не пустая (то есть были ошибки), то выводим окно (alert() ) с ошибками. И возвращаем false , чтобы форма не была отправлена. Если переменная bad пустая, то дальше просто возвращаем true , чтобы форма была отправлена уже на обработку в "handler.php ".
Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты - 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. Если она не подключена ранее, сделайте это, добавив вот такую строку:
Куда и как правильнее добавлять библиотеку, вы можете прочитать в статье - .
После библиотеки, не перед ней, а именно после нужно уже подключать, наш долгожданный скрипт валидации формы. как и писал ранее, первым вариантом будет сначала скрипт проверки поле на заполнение, без проверки правильности введенной почты. Сам скрипт имеет следующий вид: