Валидация формы

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

Что такое валидация формы и зачем она нужна

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

Вот в такой ситуации нам и нужен валидатор для формы который будет проверять заполненность обязательных полей и формат каких-то специфических данных, в моем примере это будет номер телефона, для которого в первом примере мы просто установим так называемую маску для ввода номера в нужном формате и проконтролируем чтобы номер не был короче нужного. Во втором примере я предоставлю вам готовый валидатор, созданный на базе известного плагина проверки номеров international telephone input (сокращенно intl-tel-input).

В этой статье примеры валидаторов даны для простейшей формы обратной связи состоящей из полей для имени и номера телефона, которая используется практически на всех лендингах в вертикали nutra или товарных лендах. Что хочу отметить, если вам не нужны сложные проверки, а необходимо чтобы пользователь просто не мог отправить пустую форму, то для этого совсем не обязательно прибегать вообще к каим то там валидаторам, это вам поможет сделать просто добавление в инпуты обязательных полей фомы такого атрибута как required и если соответствующий инпут не заполнен то браузер сам покажет предупреждение о необходимости заполнить это поле и форма при этом конечно не отправит данные.

Валидатор формы на javascript

Итак, первый пример это валидатор с проверкой заполненности поля имени и с маской ввода номера для поля телефона. Он сделан на базе известного плагина inputmask авторства Robin Herbots и я беру и для первого и для второго примера именно версию на базе известной библиотеки jquery мне с ней проще работать так как я не спец javascript, а синтаксис jquery более схож с близким мне php)), для примера я сделаю маску для номера телефона Узбекистана, потому что там есть в коде страны цифры 9, подробнее почему ниже.

Дело в том что данный плагин по умолчанию цифру девять в маске для ввода рассматривает как любую цифру, соответственно я покажу сразу как экранировать девятку в коде страны чтобы она корректно выводилась при показе макси ввода номера. Первое что я делаю, если вдруг на лендинге еще не подключена библиотека jquery, подключаю ее с официального репозитория плагина, далее также из репозитория cloudflare подключаю наш плагин маски и под ним прописываю теги script куда мы запишем код нашего валидатора? причем делаю я это в само низу страницы

далее я просто приведу пример кода с маской для Узбекистана, собственно мы запускаем анонимную функцию где пропишем весь необходимый код и первое что делаем это инициализируем для нашего инпута с номером телефона, у меня он в форме прописан как name=»phone» по атрибуту name маску следующим кодом

$(function(){

	$('[name="phone"]').inputmask("+\\9\\98#########");

});

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

$(function(){

	$('[name="phone"]').inputmask("+\\9\\98#########");

	if(window.errorMessage === undefined)
	{
		var errorMessage = function(msg)
		{
			alert(msg);
			return false;
		}
	}
	
});

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

$(function(){

	$('[name="phone"]').inputmask("+\\9\\98#########");

	if(window.errorMessage === undefined)
	{
		var errorMessage = function(msg)
		{
			alert(msg);
			return false;
		}
	}

	$('form').submit(function(){
		if($(this).find('[name="name"]').length > 0)
		{
			var name = $(this).find('[name="name"]').val();
			if(name.length == 0)
			{
				return errorMessage('Вы не заполнили поле "Имя"');
			}
		}
		var phone = $(this).find('[name="phone"]').val();
		var clear_phone = phone.replace(/[^0-9]/g,'');
		if(phone.length == 0)
		{
			return errorMessage('Вы не заполнили поле "Телефон"');
		}
		if(clear_phone.length < 12)
		{
			return errorMessage('Введен слишком короткий номер телефона');
		}
		return true;
	});

});

Первое это проверка нашего поля имени, у меня оно в форме прописано как name=»name», на пустоту, т.е. допустим в нем хотя бы один символ, в противном случае выводит ошибку, я ее тут прописал на русском чтобы было понятно что за ошибка, а так конечно выводим ее на языке того гео под которое у вас лендинг

ну и далее непосредственно проверка поля номера телефона, который мы помешаем в переменную phone и эта функция

var clear_phone = phone.replace(/[^0-9]/g,'');

чистит наш номер от всего, на случай если в маске номера присутствуют скобки, тире, пробелы, ну и плюс убирает, оставляя в нем только цифры, чтобы корректно считать количество цифр в номере, на картинке я выделил это значение чтобы было понятно где оно, в моем примере номер должен содержать не более 12 цифр

вот мы и разобрали первый пример валидатора с маской ввода номера.

Валидатор формы на js плюс intl-tel-input

Ну и обещанный второй пример, это валидатор на базе плагина International Telephone Input, делал я его себе под крипто ленды, но потом сделал и версию для обычных форм, которую вам и представлю ниже. Собственно сама форма выглядит так если данных нет или они некорректны

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

Теперь расскажу про его настройки, сразу отмечу что архив с этим валидатором вы сможете скачать и там будет пример индексного файла в котором есть пример подключения, поэтому кодом этот процесс я тут не буду прописывать а покажу на скриншотах что и где. Первый момент, валидатор настроен на конкретные наименования полей имени и телефона, поэтому при подключении внимательно следите чтобы они соответствовали имя name=»name», телефон name=»phone», если этот момент упустить валидатор работать корректно не будет.

Итак, подключается все довольно просто, в архиве вы увидите всего три файла папка css и файл index.html это просто пример подключения валидатора, вам оттуда нужна только папка valid, вот в ней все файлы и находятся,

ну а сам пример подключения вы найдете в index.html, подключаю я валидатор всегда перед закрывающим тегом </body> внизу страницы

первыми подключаются стили самого плагина и валидатора, далее подключаем библиотеку jquery если ранее в лендинге она у вас не подключалась и два скрипта, плагина и валидатора. Последней строкой идут две переменные, в lang двухбуквенным кодом указывается язык для валидации, т.е. на каком языке пользователь будет видеть ошибки валидации в форме, если не указать то язык по умолчанию будет английский. А в country указывается страна которую откроет в поле телефона для ввода номера при загрузке, если ее не указать, то откроет ту страну с ip которой пользователь заходит на страницу.

Все переводы сообщений валидатора доступны на момент написания статьи для следующих языков RU, EN, RO, BG, SK, HU, GR, FR, MY, CN, CZ, PT, ES, IT, DE, PL, AR, SI, RS, IN, ID, VN, HR, PH, TH, AL, SG, MK, LV, LT, BA, UZ, KZ, TR. Но вы без труда сможете самостоятельно добавить нужный язык если его там нет, для этого необходимо открыть в любом удобном для вас редакторе файл по адресу valid/js/isValidNumber.js скопировать код для русского языка, как в примере на скрине ниже, указать буквенный код нового гео обязательно в верхнем регистре и перевести текст в кавычках на нужный язык, все.

Ну и как обещал вот тут вы сможете скачать архив данного валидатора формы.

Валидация формы php

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

if (!empty($_POST['name']) && !empty($_POST['phone']){
    //тут идет ваш код отправки данных
}else{
    die('Необходимо заполнить имя и телефон!!!');
}

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