Главная › Телефон › Проверка формы на JavaScript

Проверка формы на JavaScript

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

Предположим, что у нас есть небольшая форма, состоящая из двух 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 ») и «Сохранить », а я напишу для тебя еще что-нибудь интересное:)

Немножко истории…

Вчера я работал над одним заказом, точнее дорабатывал его. В админке WordPress я создал поля для вставки телефонов, адресов и т.д.

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

Стал я думать над этим вопросом, и решение пришло! Можно осуществить проверку на заполнение полей формы с помощью JQuery Validation . Этот способ можно использовать на любых движках, сайтах и т.д.
Итак, плагин JQuery Validation проверяет поля формы на созданные вами правила и, если есть не соответствие, выводит динамические ошибки, которые сделал пользователь при заполнении формы.

Приступим к созданию формы.

Создайте файл для формы. Если есть файл с формой, значит, пропустите первый пункт. Вот так выглядит код формы:

Ваше Имя:

Ваш пароль:

Обратите внимание на id="myform-1 " , name="login " , name="password " . Эти названия я буду использовать, когда буду создавать правила проверки формы. Вы по желанию можете назвать своими именами.

К файлу, где будет размещена форма, плагин JQuery Validation и файл с расширением «.js », где будете писать свои правила для проверки формы.
Вставьте этот код между тегами :

Создайте папку «js » и создайте там файл «myscriptspravil.js» с таким кодом: $(document).ready(function(){ $("#myform-1").validate({ // правила для полей с именем и паролем rules:{ login:{ required: true, // поле для имени обязательное для заполнения minlength: 4, // в поле для имени должно быть не меньше 4 символов maxlength: 16, // в поле для имени должно быть не больше 16 символов }, password:{ required: true, // поле для пароля обязательное для заполнения minlength: 6, // в поле для пароля должно быть не меньше 6 символов maxlength: 16, // в поле для пароля должно быть не больше 16 символов }, }, // сообщение для поля с именем и пароля, если что-то было не по правилам messages:{ login:{ required: " Это поле обязательно для заполнения", // сообщение для имени, если поле не заполнено minlength: " Имя должно иметь минимум 4 символа", // сообщение для имени, если в поле меньше 4 символов maxlength: " Максимальное число символов для имени - 16", // сообщение для имени, если в поле больше 16 символов }, password:{ required: " Это поле обязательно для заполнения", // сообщение для пароля, если поле не заполнено minlength: " Пароль должен иметь минимум 6 символов", // сообщение для пароля, если в поле меньше 6 символов maxlength: " Максимальное число символов - 16", // сообщение для пароля, если в поле больше 16 символов }, } }); });

Разберем немного код.
Пункт №3 .

$("#myform-1").validate({

«myform-1» – это название формы и взято оно здесь:

Пункт №5.
rules:{ – означает правила. Здесь нужно писать правила для полей между скобками rules:{ }

Пункт №7.

Правила пишем через запятую между скобками login:{ }

Пункт №13 .

password:{ – здесь создаем правила для поля с паролем. Взяли имя поля из формы

Правила пишем через запятую между скобками password:{ }

Пункт №20 .

messages:{ – здесь выводим для каждого правила и для каждого поля сообщение об ошибке.

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

Можно создать стили CSS для ошибок: .error { color: red; }

Вот, что в результате должно получиться:

Для заметок:

Вот так выглядит шаблон файла для создания правил - «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, точки и дефиса"; }

Я делаю запрос на перекрестный домен ajax на свою php-страницу на сервере. Я отправляю форму из html через ajax на мою страницу php на сервере. Проблемы с проверкой на стороне клиента.

Я не знаю, как сделать валидацию на стороне клиента перед отправкой формы.

HTML форма стандартной формы, размещение полей ввода: имя, фамилию, сообщение.... My HTML форма, на стороне клиента:

Как валидации? Я пытаюсь поставить код в sendmail, но безуспешно. Или возможно использовать submitHandler?

Идея - это когда пользователь нажимает кнопку «Отправить», этот запуск проверки и если не удается «вставить адрес электронной почты». Теперь, когда я нажимаю кнопку отправки, вы отправляете данные на сервер. Я хочу, чтобы первые поля ввода проверяли.

Эта форма является фактической работой с отправкой данных на сервер, но просто нужно выяснить, как сделать валидацию. Где поставить валидацию в ajax-вызов?

Благодаря

5 ответов

Сортировка:

Активность

Пожалуйста, подтвердите форму перед отправкой запроса AJAX. Если нет ошибки, тогда ajax-запрос должен быть отправлен, иначе return false. Вы можете сделать так:

$("#form1").submit(function (e) { e.preventDefault(); // Get the Login Name value and trim it var name = $.trim($("#name").val()); // Check if empty of not if (name === "") { alert("Text-field is empty."); return false; } });

Вы также можете сделать функцию OnKeyUp.

Во-первых, вы действительно используете форму AJAX?

Вы объяснили, что вы загружаете форму через AJAX, но отправляете ли вы ее так же? Мне кажется, что вы пытаетесь отправить HTML-код. Вы можете подключиться к кнопке отправки click event перед отправкой формы. Однако, поскольку кнопка добавляется на страницу во время выполнения, вам необходимо зарегистрировать событие на document .

$(document).on("click", "input", function() { // Validate form // Add error message on fail, and return // Else submit form via AJAX });

В любом случае, вы можете использовать jQuery"s blur event в качестве альтернативы для проверки каждого поля, когда пользователь переходит к следующему. Вы можете даже проверять каждый раз, когда пользователь нажимает клавишу с keypress .

Создайте функцию для проверки формы, возвращающей true/false. Вызовите функцию непосредственно перед $ .ajax. проверить, если возвращение ложно, то вернуть.. смотрите пример ниже...

If(!validateForm()) return false;

Я всегда проверять их прямо перед тем, как ввести их в вызов AJAX. Вот мой экзамен

$("#form_nieuwsbrief").bind("submit",function(){ var name = $("input").val(); var email = $("input").val(); var proceed = true; if (name==""){ $("input").css({"border":"2px solid red"}); proceed = false; } if (email==""){ $("input").css({"border":"2px solid red"}); proceed = false; } if(proceed == false){ $("#msg").append("U bent informatie vergeten in te vullen."); setTimeout(function(){ $(".alert").fadeOut(400, function(){ $(this).remove(); }) ;},10000); } if(proceed == true){ // make the ajax call

Это просто информационный бюллетень, который просто запрашивает имя и адрес электронной почты. Но принцип тот же. Перед выполнением вызова ajax создайте оператор if else с установленной вами переменной, если что-то ложно. иначе вы будете придерживаться его первоначальной проверки, таким образом, вы можете продолжить.

«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.

Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.

Пользователь ошибся случайно, например, невнимательно прочитал, что ему требуется указать.

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

Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.

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

Обязательное поле

Некоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required , как показано в примере 1.

Пример 1. Атрибут required

HTML5 IE 10+ Cr Op Sa Fx

Обязательное поле

Логин:

Пароль:

Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не отправится и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера, например Chrome выводит всплывающую подсказку, как показано на рис. 1.

Рис. 1. Обязательное поле не заполнено

Корректность данных

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

Веб-адрес ( ) должен содержать протокол (http://, https://, ftp://).
Адрес электронной почты ( ) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.

У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.

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

Пример 2. Корректность данных

HTML5 IE 10+ Cr Op Sa Fx

Корректность данных

Заполните форму (все поля обязательны)

Имя:

Email:

Сайт:

Opera проверяет элемент формы только при наличии атрибута name.

Что происходит в Opera при вводе неверных данных показано на рис. 2.

Рис. 2. Предупреждение о неправильных данных

Шаблон ввода

Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern , а его значением выступает регулярное выражение . Некоторые типовые значения перечислены в табл. 1.

В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.

Пример 3. Шаблон ввода

HTML5 IE 10+ Cr Op Sa Fx

Ввод цвета

Введите шестнадцатеричное значение цвета (должно начинаться с #)

На рис. 3 показано предупреждение в браузере Chrome.

Рис. 3. Введённые данные не соответствуют шаблону

Отмена валидации

Валидация не всегда требуется для формы, к примеру, разработчик пожелает использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate тега . В примере 4 показано использование этого атрибута.

Пример 4. Отмена валидации

HTML5 IE 10+ Cr Op Sa Fx

Атрибут novalidate

Для аналогичной цели применяется и атрибут formnovalidate , который добавляется к кнопке для отправки формы, в данном случае к тегу . В этом случае форма из примера 4 будет иметь следующий вид.

Очень часто возникает необходимость добавления формы на сайт, ведь форма - это самый популярный способ общения пользователя с сайтом, и очень важно, чтобы данные, ведённые пользователем были корректными. И чтобы форма была отправлена с верными данными необходимо её перед этим проверить. И вот проверкой формы в 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 ".