Как отследить заполненность всех полей формы js

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

В разных ситуациях количество таких полей разное, но всегда > 100. Есть ли какой-либо простой способ проверить сразу все поля на факт заполнения используя JavaScript или jQuery не прибегая к циклам и не перебирая каждый элемент по отдельности? Вариант минимум — получить ответ: все поля заполнены/есть незаполненные поля, вариант максимум — получить ответ: все поля заполнены корректными целочисленными значениям/есть некорректные данные (не все значения целочисленные)/ не все поля заполнены.

Отслеживать

28.8k 12 12 золотых знаков 59 59 серебряных знаков 118 118 бронзовых знаков

Проверка заполнения полей формы на jQuery

Пример простой формы обратной связи с использованием плагина проверки полей. Для этого понадобится плагин jquery.validate.js и библиотека jQuery.

          
 
 
Имя * 
 
E-Mail * 
 
URL сайта 
 
Комментарий * 
 
 
 
 
   

1. Для работы проверки потребуется наличие библиотеки jQuery и плагина jquery.validate.js
2. Чтобы поле обозначить обязательным к заполнению, в input пишем class=»required»
3. Так же используются проверки на правильность заполнения email, url и другие варианты, которые описываются на официальном сайте jQuery. На данном примере пишем в class=»required email» или
4. По умолчанию уведомление об ошибке выводится на английском языке, чтобы изменить текст незаполненного поля, добавляем соответствующие строки в тело скрипта:

$.validator.messages.required = "Заполните поле!"; $.validator.messages.email = "Неверный формат email"; $.validator.messages.url = "Неверный формат url, начните с http://";

Отслеживание заполнения полей формы с помощью Google Analytics

Формы с большим количеством полей – это не круто! Имя, фамилия, e-mail, телефон, ссылка на сайт, капча… Сколько таких полей выдержит пользователь? На каком из них он остановится и покинет сайт? Как определить их оптимальное количество? В этой статье с помощью Google Analytics научимся строить визуализированные воронки и отслеживать заполнения полей форм.

Чтобы было нагляднее и понятнее, разбирать будем на примере данной формы:

Форма состоит из заполняемых полей:

• Имя
• Ссылка на сайт или мобильное приложение
• E-mail
• Телефон
• Принять пользовательское соглашение (чекбокс)

После отправки пользователя перебрасывает на страницу «Спасибо», которая имеет URL страницы https://graphanalytics.ru/thank-you.html

А воронка, которую мы построим и увидим в Google Analytics, будет выглядеть так:

Воронка заполнения полей формы

Отслеживать заполнение полей будем с помощью событий onblur и виртуальных страниц. Прочитать подробнее о событиях Google Analytics можно в этой статье.

• событие onblur срабатывает тогда, когда идет переход фокуса от определенного элемента к другому.

Сущность этого действия заключается в утере фокуса. В нашем примере событие будет происходить тогда, когда пользователь введет информацию в первое поле «Имя», а потом перейдет к следующему «Сайт или мобильное приложение», введет данные в нем и перейдет к следующему «E-mail», и т.д. по полям. Когда будет переход фокус от одного поля к другому – будут срабатывать события.

На самом деле можно использовать два события на одном элементе, как onblur, так и противоположное onfocus. При такой конструкции события будут возникать и передаваться в GA по два раза — при получении фокуса в текстовом поле и при его потере.

• виртуальные страницы нам нужны для того, чтобы визуализировать воронку, поскольку в Google Analytics это можно делать только с помощью классических целей. А чтобы это сделать для событий, необходимо использовать virtual page.

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

• затем создаем составную цель из виртуальных страниц, а на последнем шаге указываем конечный URL нашей страницы «Спасибо».

Все, что теперь осталось – это добавить конструкции события c просмотром виртуальных страниц в код формы в зависимости от библиотеки Google Analytics. У меня сайт с analytics.js, поэтому будет иметь вид:

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

В этой статье мы начнём разбираться с более сложными и функционально-законченными скриптами. Пройдём по шагам через все стадии — начиная с постановки задачи и заканчивая универсальным скриптом, готовым к употреблению. И начнём с проверки формы перед отсылкой на сервер.
Общие соображения и html-код формы

Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо её вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна — проверить, что пользователь заполнил все нужные поля перед отправкой и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.

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

Ваше имя: *
Электронный адрес: *
Тема сообщения:
Сообщение:

* — необходимые для заполнения поля

Заметьте, что в отличие от обычной формы непосредственно в теге мы отслеживаем событие onsubmit и при его наступлении вызываем функцию проверки формы sendform().

Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onclick? Ответ простой — при использовании события onclick кнопку «submit» придётся заменить обычной кнопкой. И, в случае, если в броузере отключена поддержка javascript, мы не сможем отправить форму (!). Отслеживание же события onsubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.

Будем считать, что необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес.

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

Функция проверки формы перед отправкой

А теперь перейдём к главному — к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от неё требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых — отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент.

Для начала напишем общую обвязку функции:

Применённый нами способ вызова функции через событие onsubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.

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

  if (document.forms[0].email.value == "") < alert('Пожалуйста, введите электронный адрес'); document.mailform.email.focus(); return false >return true; > //-->

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

сначала проверяем, что данное поле является пустым. И если это так, то
выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
выйдем из функции, установив флажок успешности выполнения в false.
В случае же, если проверяемое поле не было пустым, то соответствующий блок просто пропускается. При пропуске всех проверочных блоков функция в качестве результата возвращает true, что свидетельствует об успешной проверке.

Универсальная функция проверки

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

Первым делом мы создадим массив, где перечислим имена всех полей, которые требуют проверки:

required = new array(«name», «email»);

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

Дополнительно к вышеописанному массиву мы добавим ещё один, который будет содержать текст ошибки для конкретного поля:

required_show = new array(«Ваше имя», «электронный адрес»);

Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа «name не введён».

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

В цикле происходит проверка всех полей формы на совпадение с «обязательными». В случае, если совпадение произошло, проверка осуществляется аналогично тому, как это было описано выше, но с одним нюансом — введение массива с сообщениями об ошибках потребовало небольшой модификации функции alert(), так что теперь текст ошибки напрямую зависит от имени поля.

Вот, в общем-то, и всё. Данная функция вполне универсальна и с минимальными корректировками (в сущности — содержимое двух массивов) может быть адаптирована к любой форме.