Дизайн та розробка сайту

Валидация или проверка полей формы на ошибки и заполнение

Валидация или проверка полей формы на ошибки и заполнение

Доброго времени суток. 🙂

В этой статье хочу рассказать вам о том, как сделать проверку полей формы на заполнение. В итоге у нас получится валидация формы с помощью jQuery. Многие делают на чистом PHP в самом обработчике, но иногда такой метод не подходит. Например, в случаи, когда вы захотите проверять форму до перезагрузки страницы. Вдруг вам не нужно обновления страницы и вы хотите вывести сообщение об ошибке, чтобы человек исправил, а уже потом произошла отправка и обновление страницы. Конечно можно еще использовать метод с AJAX, но это уже совсем другая история 🙂

Валидация или проверка полей формы на ошибки и заполнение

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





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

Для осуществления задуманного, нам нужно для начала создать саму форму. У Вас она уже может быть, если вы захотите данный материал внедрить в нее, нужно будет его адаптировать под вашу форму. Я же покажу все на своем примере. Моя форма ничего не будет отправлять, в этой статье нет обработчика для отправки писем, чтобы не усложнять материал. Обработчик отправки писем, это другая история. Для начала сам HTML код формы.

<form id="file_form" action="">
<div id="messenger"></div>
<input type="text" name="name_f" id="name_f"  placeholder="Ваше имя" autocomplete="on" class="in_pl">
<input type="email" name="contact_f" id="contact_f" placeholder="Ваш E-mail" autocomplete="on" class="in_pl">
<textarea name="mssg_f" id="mssg_f" rows="5" placeholder="Ваше сообщение" class="in_pl"></textarea>
<input value="Отправить" type="submit" name="submit"  id="sub_f" onclick="frmotpr();" />
</form>

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

  • id="file_form" - айди для нашей формы. ID - обязателен, он будет тоже использоваться в скрипте.
  • <div id="messenger"></div> - обязательный блок. Это контейнер для вывода сообщений об ошибке от скрипта. данный блок можно разместить и вне формы. Задать ему любые стили. В примере, это тот красный текст, что сообщает об незаполненном поле.
  • 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. Если она не подключена ранее, сделайте это, добавив вот такую строку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Куда и как правильнее добавлять библиотеку, вы можете прочитать в статье - Как и где подключить скрипт?.

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

<script>
$(function frmotpr(){
		var field = new Array("name_f", "contact_f", "mssg_f");
		$("#file_form").submit(function() {
			var error=0;
			$("#file_form").find(":input").each(function() {
				for(var i=0;i<field.length;i++){
					if($(this).attr("name")==field[i]){
						if(!$(this).val()){
							$(this).addClass('notvalid');
							error=1;	
						}
						else{
							$(this).removeClass('notvalid');
						}
					}						
				}				
		   })
			if(error==0){
			return true;
			}else{ var err_text = "";
			if(error==1)  err_text="Не все обязательные поля заполнены!";
			$("#messenger").html(err_text);	
			$("#messenger").fadeIn("slow");	
			return false;
			}
		})
	});
</script>

Давайте рассмотрим основные элементы нашей функции из скрипта.

  • frmotpr() - вторая строка, название функции. Это название должно совпадать с называнием внутри нашего события onclick, что мы добавили кнопке ОТПРАВИТЬ.
  • ("name_f", "contact_f", "mssg_f") - в третей строке в кавычках, через запятую мы указываем ID наших полей ввода, что обязательны к заполнению. Я ввел все три. Вы можете ограничится одним или двумя или десятком, если у вас будет много полей.
  • $("#file_form").submit - в четвертой строке указываем ID нашей формы и то что функция будет срабатывать когда мы нажмем на кнопку submit этой самой формы.
  • error=0; - код ошибки, а вернее ее отсутствие.
  • $("#file_form").find(":input") - проверяем все поля ввода input нашей формы на заполнение.
  • Далее идет проверка на заполненность в результате чего срабатывает условие для вывода сообщения об ошибке.
  • $(this).addClass("notvalid"); - в итоге, если поле не заполнено то ему присваивается класс - notvalid. Для которого мы присвоили в стилях определенные параметры, а точнее неправильно заполненное поле, будет становиться красным.
  • $(this).removeClass("notvalid"); - если поле правильно заполнено - удаляем класс notvalid.
  • if(error==0){ - далее мы проверяем что у нас вышло в итоге. и если код ошибки 0 - то есть ошибки отсутствуют, мы переходим к следующему пункту:
  • return true; - разрешаем сработать нашей форме и отправить данные. Например через action. Так же в это место вы можете добавлять AJAX функцию для отправки письма или ще что-то что нужно выполнить если фсе поля заполнены. тут ограничивается вашей фантазией.
  • }else{ var err_text = ""; -далее условие, что в противном случаи, если есть ошибки, мы создаем переменную err_text и задаем ей пока что пустое значение.
  • if(error==1) err_text="Не все обязательные поля заполнены!"; - Если код ошибки 1, то есть одно или несколько полей не заполнены, мы присваиваем переменной err_text - текст Не все обязательные поля заполнены!.
  • $("#messenger").html(err_text); - наш текст ошибки вставляем в тот самый блок для ошибок - messenger.
  • ("#messenger").fadeIn("slow"); - далее показываем с легкой анимацией наш блок, который мы стилями выше скрыли. Если было пустое поле вы увидите после нажатия на кнопку сообщение об ошибке.
  • return false; - запрещаем отправку формы и возвращаемся к началу. перед этой строкой можете тоже добавить какие-то задачи или функции, которые хотите.

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

Теперь давайте рассмотрим версию скрипта, которая помимо проверки на заполнение, будет еще и проверять корректно ли введен e-mail.

Сам скрипт очень похож, добавлена просто еще функция и пару новых строк:

<script>
$(function frmotpr(){
		var field = new Array("name_f", "contact_f", "mssg_f");
		$("#file_form").submit(function() {
			var error=0;
			$("#file_form").find(":input").each(function() {
				for(var i=0;i<field.length;i++){
					if($(this).attr("name")==field[i]){
						if(!$(this).val()){
							$(this).addClass('notvalid');
							error=1;	
						}
						else{
							$(this).removeClass('notvalid');
						}
					}						
				}				
		   })
			var email = $("#contact_f").val();
		   	if(!isValidEmailAddress(email)){
				error=2;
				$("#contact_f").addClass('notvalid');
			}
			if(error==0){
			return true;
			}else{
			var err_text = "";
			if(error==1)  err_text="Не все обязательные поля заполнены!";
			if(error==2)  err_text="Введен не корректный e-mail!";
			$("#messenger").html(err_text);	
			$("#messenger").fadeIn("slow");	
			return false;
			}
		})
	});
	function isValidEmailAddress(emailAddress) {
		var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
		return pattern.test(emailAddress);
    }
</script>

Собственно, рассмотрим новые строки

  • function isValidEmailAddress(emailAddress) - последние 4 строки скрипта это функция валидации для e-mail. Особо разбирать там нечего она нужна для проверки и участвует в условиях из основной функции. Я ее упоминаю в самом начале, дабы потом ссылаясь на нее было понятно.
  • var email = $("#contact_f").val(); - эти строки выше. Создаем переменную email и указываем айди нашего поля для почты - contact_f.
  • if(!isValidEmailAddress(email)){ - создаем условие, что если наша функция по проверке выявила ошибку, присваиваем ошибке новый код.
  • error=2; - присваиваем ошибке код 2.
  • $("#contact_f").addClass("notvalid"); - полю e-mail присваиваем наш класс ошибки notvalid.
  • if(error==2) err_text="Введен не корректный e-mail!"; - эта строка добавилась в то место, где мы присваиваем переменной err_text - текст. Данная строка указывает, что если код ошибки 2, то есть некорректный e-mail, выведется текст - Введен не корректный e-mail!

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

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

На этом все, спасибо за внимание. 🙂

Дизайн та розробка сайту

Back to top