Валидация данных формы - JavaScript на сайте

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


Организация html-кода формы в PIXLI


Когда в визуальном редакторе разработчик создает форму, он не видит ее html-кода и не знает, какие селекторы ей присваиваются. Давайте разберемся, как можно обратиться к полю формы через javascript. Задавая класс для элемента формы на правой панели, на самом деле класс назначается не самому полю, а блоку div, в который оно вложено.

Вот так выглядит код текстового поля ввода электронной почты. JavaScript дает возможность обратиться к любому элементу, даже если у него нет собственного идентификатора. Воспользуемся объектом Document и его методами:
  • getElementById – получение ссылки на элемент по его идентификатору
  • getElementsByTagName – получение массива, содержащего ссылки на все элементы указанного типа, находящиеся в HTML-документе или в контейнере.
Зная идентификатор блока, который содержит тег , мы можем к нему обратиться. Как узнать идентификатор? Редактор предоставляет нам такую возможность.
Создадим форму

При нажатии правой кнопки мыши в редакторе появится контекстное меню. Выберем пункт «Копировать селектор в буфер».

При этом мы получим id блока div, в котором находится поле. В нашем примере это будет такая строка:
#idb26084ee-fae1-8119-fc17-0b585ed38348

Проверка ввода email


Мы хотим не только проверить правильность ввода в форму, но и заблокировать кнопку. Она не должна нажиматься до тех пор, пока адрес почты не введен правильно. Селектор блока, содержащего кнопку, #id53fc22de-8d42-2fa5-2889-64336feed3ce.
Поместим блок HTML-кода под кнопкой – его надо просто перетянуть с панели инструментов на форму. В левой панели можно посмотреть дерево элементов.


На следующем этапе мы должны обратиться к элементам формы. Получим доступ к блоку по ID:
  • document.getElementById('idb26084ee-fae1-8119-fc17-0b585ed38348') — Ссылка на блок с текстовым полем
  • document.getElementById('id53fc22de-8d42-2fa5-2889-64336feed3ce') — Ссылка на блок с кнопкой
Затем по имени тега получим ссылку на поле и кнопку соответственно.
  • document.getElementById('idb26084ee-fae1-8119-fc17-0b585ed38348').getElementsByTagName('input')[0] — Ссылка на текстовое поле
  • document.getElementById('id53fc22de-8d42-2fa5-2889-64336feed3ce').getElementsByTagName('button')[0] — Ссылка на кнопку
Форма строится таким образом, что в одном блоке располагается один элемент и ID блока идентифицирует эту пару однозначно. Когда разработчик создает новый элемент в форме, редактор автоматически помещает его в блок с уникальным ID. Таким образом, мы знаем, что блок содержит единственный элемент, и знаем его номер в массиве – 0.
Теперь нам надо выстроить логику проверки:
  1. Перехватить нажатие на кнопку.
  2. Проверить данные пользователя.
    • Если поле заполнено верно, обработается событие по умолчанию для платформы PIXLI.
    • Если поле заполнено неверно, отменить нажатие на кнопку и вывести подсказку.
Для перехвата события воспользуемся объектом Event и его методом addEventListener. Объект Event предоставляет разработчику доступ ко всем событиям браузера, а метод addEventListener регистрирует определенный обработчик события, вызванного на элементе. Обработаем событие Click для кнопки.
document.getElementById('id53fc22de-8d42-2fa5-2889-64336feed3ce').getElementsByTagName('button')[0].addEventListener("click",
function(e){
 Действия, выполняемые при возникновении события
 }
 });
Для проверки правильности ввода в форму воспользуемся простым регулярным выражением: /^.+@.+\..+$/. Оно означает, что строка, введенная в поле должна обязательно содержать набор любых символов (хотя бы один), затем знак «@», затем опять любые символы (хотя бы один), затем точку и опять хотя бы один любой символ. Можно воспользоваться более сложным выражением, детально проверяющим ввод. Но нам хватит и этого.
Для проверки применим метод Test объекта String. Он возвращает -1 в случае отсутствия совпадения. Вот что получилось в итоге:
<script>
 document.getElementById('id53fc22de-8d42-2fa5-2889-64336feed3ce').getElementsByTagName('button')[0].addEventListener("click",
function(e){
	str=document.getElementById('idb26084ee-fae1-8119-fc17-0b585ed38348').getElementsByTagName('input')[0].value;
 	var result = str.search( /^.+@.+\..+$/ );
	 if (result==-1)
 	{
		document.getElementById('idb26084ee-fae1-8119-fc17-0b585ed38348').getElementsByTagName('input')[0].focus()
		document.getElementById('id6e5b8d81-89a4-c90c-640d-fc28d4298d7e').style.display='block'
 		e.preventDefault()
 	}
 });
</script>
Строка
document.getElementById('id6e5b8d81-89a4-c90c-640d-fc28d4298d7e').style.display='block' 
заставляет появляться поле с подсказкой, которое мы также расположили на форме и убрали с помощью значка на правой панели инструментов.


Метод preventDefault() объекта Event отменяет действие события по умолчанию. Теперь, если пользователь неправильно ввел в поле email, кнопка не нажимается, а на форме появляется подсказка.

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


При проверке ввода имени пользователя будем исходить из того, что оно состоит только из букв латинского и русского алфавита. Даже если нам пишет граф Иванов VI, номер указывается латинскими цифрами.
Получить код нажатой клавиши мы сможем с помощью объекта Event, который имеет свойство keyCode.
В JavaScript коды клавиатуры отличаются от ASCII-кодов.
Таблицы кодов JavaScript

Таблицы кодов русских символовJavaScript

Нам нужно проверить код нажатой клавиши. Он должен быть в диапазонах от 65 до 90 или от 97 до 122 или от 1040 до 1103. Но мы проверяем случай, когда нажатая клавиша не попала в один из этих диапазонов. То есть наше условие будет иметь вид:
a<65 || (a>90 && a<97) || (a>122 && a<1040) || a>1103
Вставим блок HTML-кода и добавим скрипт.
document.getElementById('id7a371700-bae1-ede1-7195-41b07e8c96dc').getElementsByTagName('input')[0].addEventListener("keypress",
function(e){
	str=document.getElementById('id7a371700-bae1-ede1-7195-41b07e8c96dc').getElementsByTagName('input')[0].value
	a=event.keyCode
	if (a<65 || (a>90 && a<97) || (a>122 && a<1040) || a>1103)
 	{
		e.preventDefault();
 	}
 }); 
Пользователь не сможет ничего ввести в поле с именем, кроме букв латинского и русского алфавита.

Проверка ввода телефона


С номером телефона мы поступим также. Мы не дадим пользователю вводить форму ничего кроме цифр. Создадим форму

ID блока в нашем случае
#id7a371700-bae1-ede1-7195-41b07e8c96dc
Откроем созданный на предыдущем шаге блок HTML-кода и добавим скрипт.
<script>
 document.getElementById('id861043b8-7b28-15d2-0788-63ba450ac183').getElementsByTagName('input')[0].addEventListener("keypress",
function(e){
	str=document.getElementById('id861043b8-7b28-15d2-0788-63ba450ac183').getElementsByTagName('input')[0].value
	if (event.keyCode<48 || event.keyCode>57 || str.length>=11)
	{
		e.preventDefault();
	}
 });
</script>
В этом случае мы перехватываем событие keypress и отменяем его, если введена не цифра. Кроме того, последним условием мы ограничиваем длину ввода.

Маска ввода


Удобнее всего устанавливать для пользователя маску ввода. Воспользуемся плагином JQuery. Сама библиотека автоматически подключается к любому сайту, созданному в редакторе PIXLI. Так как платформа не дает возможности закачивать и подключать сторонние скрипты, а подключение по адресу в интернет может подвести нас, мы скачаем плагин, скопируем его код и добавим к нашему сайту. Для этого в самое начало документа добавим блок HTML-кода и скопируем в него код плагина.

После поля для ввода телефона в нашей форме добавим блок HTML-кода и добавим в него скрипт.
<script>
 $("#ide590b47d-ac1c-26b0-6fa2-72e2bec3bc73 input").mask("+7(999) 999-9999");
</script>
В итоге мы получили несколько способов валидации форм. Надеемся, что наша статья поможет вам сделать ваш сайт комфортным для посетителя.
25 february 2017, 17:43    Ivan Web-дизайн 0    12 0

Comments (0)

    You need to login to create comments.