ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Расширенная проверка формы с помощью плагина Validation

Расширенная проверка формы с помощью плагина Validation

Плаrин Validation предоставляет способ проверки формы, не требующий изменения НТМL-кода элементов формы. Кроме того, существует большое количество дополнительных настроек для управления работой плагина. Они задаются путем передачи функции validate() объектной константы, содержащей отдельные объекты для разных настроек. Например, для указания правила проверки передается объект, содержащий код для этого правила.

Расширенные правила

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

$("form").validate()({
	rules:{
	fieldname:"validationType"	
	}
});

Объект называется rules, и внутри него мы определяем элементы формы и типы проверки. Затем объект передается функции validate().

Для ашей формы код будет выглядеть так:

$("#signup").validate()({
	rules:{
	username:"required"	
	}
});

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

$("#signup").validate()({
	rules:{
	username:"required",	
	email:{ 
		required:true, 
		 email:true 
	  }
	}
 })

Примечание. Согласно правилам литералов объектов (объектных констант) JavaScript, вы должны завершать каждую пару имя/значение, за ис­ключением последней, запятой. Например, в строке 3 после фрагмента username: 'required' должна быть запятая, поскольку далее следует другое правило (для поля электронного адреса).

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

Если мы хотим проверить как заполнен элемент формы "Дата рождения" введем следующее правило:

$("#signup").validate()({
	rules:{
	username:"required",	
	email:{
		required:true,
		email:true
	 },
	 age:{
		required:true, 
		date:true
	 }
	}
 }}
 })

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

Плагин Validation включает методы, отвечающие наиболее распространенным требованиям проверки
Правило проверки Описание
minlength Поле должно содержать, по крайней мере, определен­ное число знаков. Например, правило, задающее ввод в поле мини­мум шести знаков имеет следующий вид:
minlength:6
maxlength Поле должно содержать не более определенного числа знаков. Например, правило, задающее ввод в поле не более 100 зна­ков, записывается так:
maxlength:100
rangelength Правило, сочетающее minlength и maxlength. Устанавливает минимальное и максимальное число знаков, раз­решенных при вводе данных. Например, правило, задающее ввод в поле минимум шести знаков, но не более ста:
rangelength: [6,100]
min Поле должно содержать число, равное или большее указанного числа. Например, следующее правило требует, чтобы поле содержало число, и чтобы это число было равным или большим 10.
min:10
max Задает максимальное число, которое может содержать поле. Например, для гарантии того, что поле содержит число, меньшее 1000, используется следующий код:
max:1000
range Правило, сочетающее min и max и задающее диапазон для чисел, вводимых в поле. Например, чтобы обеспечить ввод чисел, не меньших 10, но и не больших 1000, используйте следующий код:
range:(10,1000]
equalTo Требует, чтобы содержимое поля совпадало с содержимым другого поля. Например, при вводе пароля посетителя часто просят повторить его. Этим проверяется правильность ввода пароля в первый раз. Чтобы применить данный метод, вы должны сначала задать строку, содержащую правильный селектор jQuery. Например, первое поле пароля имеет идентификатор password. Если хотите обеспечить соответствие содержимого поля "Подтвердите пароль" содержимому первого поля, примените код:
equalTo: '#password'

Расширенные правила проверки можно применять в сочетании друг с другом. Вот пример такого сочетания. Допустим, ваша форма включает два поля, одно из которых служит для ввода пароля, а второе - для его подтверждения. НТМL-код для этих двух полей выглядит так:

<input name="password" type="password" id="password" >
<input name='passagain' type="password" id="passagain">

Примечание. Плагин jQuery Validation предусматривает второй плагин additional­method.js, определяющий дополнительные правила проверки, включая правила, для минимального количество слов, идентификационные номера автомобилей США, номера счетов банка Dutch Bank и другие менее конкретные, но потенциально полезные, правила. Для этих дополнительных правил не существует документации, поэтому вам придется обратиться к коду в файле additional-method.js. При обнаружении понравившихся правил вам следует сохранить копию файла, например, под именем my-rules.js, и удалить все ненужные правила.

Оба поля обязательны для заполнения, а пароль должен содержать от 8 до 16 символов. Наконец, нам нужно гарантировать, что поле "Подтвердите пароль" совпадает с первым полем для ввода пароля. Допустим, форма имеет идентификатор signup, тогда вы можете верифицировать эти поля с помощью следующего кода:

$("#signup").validate()({
	rules:{
	username:"required",	
	email:{
		required:true,
		email:true
	 },
	 age:{
		required:true, 
		date:true
	 },
	 password:{
		 required:true,
		 rangelength:[8,16]  
	 },
	 passagain:{
		equalTo:'#password'
	 }
	}
 })

Расширенные сообщения об ошибках

Cообщение об ошибке можно легко добавлять с помощью атрибута title, содержащего его текст. Однако данный способ не позволяет создавать отдельные сообщения для каждого типа ошибки проверки. Скажем, поле является обязательным для заполнения и должно содержать число. Вам нужно иметь два разных сообщения для каждого типа ошибки: "Это поле обязательно для заполнения" и "Введите число". Мы не можем сделать это с помощью атрибута title. Вместо этого мы должны передать функции validate () объект JavaScript, содержащий различные сообщения об ошибках, которые хотите отобразить.

Процесс схож с созданием расширенных правил, описанным в предыдущем разделе. Базовая структура объекта messages такова:

	messages:{
		Fieldname:{
			medhodType:"Сообщение об ошибке"
		}
	}

Проверка с помощью сервера

Хотя проверка средствами JavaScript удобна для быстрой проверки введенной пользователем информации, иногда необходимо обратиться к серверу за проверкой корректности заполнения поля. Например, у вас есть форма регистрации, позволяющая посетителю создать имя пользователя для участия в форумах на вашем сайте. Два человека не могут иметь одинаковое имя пользователя, поэтому представляется целесообразным сообщить посетителю о том, что введенное имя уже используется, еще до того момента, когда он попытается отправить заполненную форму. В этом случае вам придется обратиться к серверу и узнать о доступности задаваемого имени. Плагин Validation располагает методом remote, позволяющим выполнить такую проверку. Данный метод дает возможность передавать имя, введенное посетителем в поле, серверу, использующему серверный язык, например, РНР, Ruby, .NEr, Java или Node.js. Сервер принимает эту информацию и совершает некоторое действие, например, проверяет доступность имени пользователя, а затем дает ответ форме в виде значений true (проверка пройдена) или false (проверка не пройдена).

Предположим, у нас есть поле "username", которое является обязательным для заполнения и не должно содержать имя, уже используемое на сайте. Для создания соответствующего правила для этого поля (с использованием расширенных правил, описанных ранее) вы можете добавить к объекту rules следующий код:

username : { 
required: true, 
rernote: 'check_usernarne.php' 

Удаленный метод принимает строку, содержащую путь от текущей до серверной страницы. В нашем примере страница называется check_ username.php. Когда плагин пытается проверить данные в поле, он посылает введенное имя пользователя (username) и данные посетителя на страницу check_username.php, которая определяет, можно ли использовать это имя. Если да, то РНР-страница возвращает слово' true'; если же имя уже задействовано, возвращается слово 'false', и поле не проходит проверку.

Все это осуществимо благодаря технологии Ajax. Рабочий пример данного метода можно найти на странице: jquery.bassistance.de/validate/demo/ captcha/.

В предыдущем примере замените часть Fieldname именем элемента формы, которое мы проверяем, а methodType - одним из методов проверки. Например, чтобы совместить методы проверки для полей ввода пароля и сообщения для каждого типа ошибок, добавьте код, выделенный полужирным шрифтом:

$("#signup").validate()({
	rules:{
	username:"required",	
	email:{
		required:true,
		email:true
	 },
	 age:{
		required:true, 
		date:true
	 },
    password:{
		 required:true,
		 rangelength:[8,16]  
	 },
	 passagain:{
		equalTo:'#password'
	 } 
	},
    	messages:{
		username:{
			required:"Это поле обязательно для заполнения"
		},
		password:{
			required:"Пожапуйста, введите паропь.",
			rangelength:"Ваш паропь допжен содержать от 8 до 16 симвопов."
		},
	    passagain:{
		   equalTo:"Введенные паропи не совпадают"
	 }	
	}
 })

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

    $("#signup").validate({

       rules:{
            username:{
                required: true,
                minlength: 4,
                maxlength: 16,
            },

            password:{
                required: true,
                rangelength:[6,16]
            },
			passagain:{				
			    equalTo:'#password'	
			},
			email:{
				required:true,
		        email:true
			},
			age:{
				required:true,
				date:true
			},
	tel:{				
				required:true,
				digits:true	
			},
			trade:"required", 
 
       },

       messages:{

            username:{
                required: "Это поле обязательно для заполнения",
                minlength: "Логин должен быть минимум 4 символа",
                maxlength: "Максимальное число символо - 16",
            },

           password:{
                required: "Это поле обязательно для заполнения",
                rangelength:"Ваш паропь допжен содержать от 6 до 16 симвопов."
		  },
		   passagain:{
		        equalTo:"Введенные паропи не совпадают"
	       },
           email:{
			    required:"Введите адрес электронной почты",
				email:"Это не корректный адрес электронной почты"
			  
		  },
		  age:{
			  required:"Введите дату рождения в формате: ММ/ДД/ГГГГ",
			  date:"Дата должна иметь формат: ММ/ДД/ГГГГ"
		  },
tel:{				
				required:"Введите номер телефона в формате:12342343",
				digits:"Телефон должен иметь формат:12342343"	
			},
		 trade:{
				required:"Вы не ввели специальность"
			},

       }

    });

Проверка состояния флажков и переключателей

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

Код проверки флажков переключателей выделен полужирным шрифтом и будет таким:

    $("#signup").validate({

       rules:{
            username:{
                required: true,
                minlength: 4,
                maxlength: 16,
            },

            password:{
                required: true,
                rangelength:[6,16]
            },
			passagain:{				
			    equalTo:'#password'	
			},
			email:{
				required:true,
		        email:true
			},
			age:{
				required:true,
				date:true
			},
			tel:{				
				required:true,
				digits:true	
			},
			trade:"required", 
				
			hobby:"required",	
			loc:"required" 
       },

       messages:{

            username:{
                required: "Это поле обязательно для заполнения",
                minlength: "Логин должен быть минимум 4 символа",
                maxlength: "Максимальное число символо - 16",
            },

           password:{
                required: "Это поле обязательно для заполнения",
                rangelength:"Ваш паропь допжен содержать от 6 до 16 симвопов."
		  },
		   passagain:{
		        equalTo:"Введенные паропи не совпадают"
	       },
          email:{
			    required:"Введите адрес электронной почты",
				email:"Это не корректный адрес электронной почты"
			  
		  },
		  age:{
			  required:"Введите дату рождения в формате: ММ/ДД/ГГГГ",
			  date:"Дата должна иметь формат: ММ/ДД/ГГГГ"
		  },
		  tel:{				
				required:"Введите номер телефона в формате:12342343",
				digits:"Телефон должен иметь формат:12342343"	
			},
		 trade:{
				required:"Вы не ввели специальность"
			},
			
		 hobby:{
			 
			 required:"Отметьте один из вариантов",
		 },
		 loc:{
			 
			required:"Выберите вариант ответа" 
		 }
       }

    });

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

Код простого метода:

<input type="checkbox" name="hobby" id="tourism" class="required" value="tourism" title="Отметьте один из вариантов" >

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

То же самое сделаем с переключателями в нижней части формы.

 
<input type="radio" name="loc" id="his" value="yes" class="required" title="Выберите вариант ответа" >

Группа связанных переключателей имеет единое имя, так что, хотя мы и добавили атрибуты class и title только одному переключателю, они применяются ко всем трем. Поскольку элемент формы обязателен для заполнения, посетитель обязан установить переключатель в одно из положений, прежде чем он сможет отправить форму.

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

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

плаrин Validation предусматривает способ управления размещением сообщений об ошибках. Вы можете создавать собственные правила размещения сообщений путем передачи еще одной объектной константы функции validate().

После объекта messages и напишим следующий код:

	   errorPlacement:function(error,element){
		if(element.is(":radio")||element.is(":checkbox")){
			error.appendTo(element.parent());
		}else{
			error.insertAfter(element);
		}		   
	   }

Плагин Validation принимает произвольный объект errorPlacement, представляющий собой анонимную функцию, определяющую расположение сообщения об ошибке. Каждая ошибка обрабатывается данной функцией, так что если вам нужно изменить расположение некоторых сообщений, вам придется использовать управляющую инструкцию для определения элементов формы, чьи ошибки вы хотите переместить. Функция принимает и сообщение, и элемент формы, к которому относится ошибка, так что вы можете использовать управляющую инструкцию для выяснения того, является ли элемент формы флажком или переключателем. Если является, то сообщение об ошибке помещается в конец элемента, содержащего данный флажок или переключатель.

В НТМL-коде этой страницы один элемент div охватывает группу флажков, а другой элемент div - группу переключателей. Таким образом, сообщение помещается перед закрывающим тегом </div> с помощью jQuеrу-функции appendTo()

Вы завершили программирование для этой формы. Ниже представлен итоговый сценарий, включая функцию $(document). ready():


$(document).ready(function(){

$("#signup").validate({

rules:{
username:{
required: true,
minlength: 4,
maxlength: 16,
},

password:{
required: true,
rangelength:[6,16]
},
passagain:{
equalTo:"#password"
},
email:{
required:true,
email:true
},
age:{
required:true,
date:true
},
tel:{
required:true,
digits:true
},
trade:"required",

hobby:"required",
loc:"required"
},

messages:{

username:{
required: "Это поле обязательно для заполнения",
minlength: "Логин должен быть минимум 4 символа",
maxlength: "Максимальное число символо - 16",
},

password:{
required: "Это поле обязательно для заполнения",
rangelength:"Ваш паропь допжен содержать от 6 до 16 симвопов."
},
passagain:{
equalTo:"Введенные паропи не совпадают"
},
email:{
required:"Введите адрес электронной почты",
email:"Это не корректный адрес электронной почты"

},
age:{
required:"Введите дату рождения в формате: ММ/ДД/ГГГГ",
date:"Дата должна иметь формат: ММ/ДД/ГГГГ"
},
tel:{
required:"Введите номер телефона в формате:12342343",
digits:"Телефон должен иметь формат:12342343"
},
trade:{
required:"Вы не ввели специальность"
},

hobby:{

required:"Отметьте один из вариантов",
},
loc:{

required:"Выберите вариант ответа"
}
},
errorPlacement:function(error,element){
if(element.is(":radio")||element.is(":checkbox")){
error.appendTo(element.parent());
}else{
error.insertAfter(element);
}

}

});

});
<!DOCTYPE html>
<html>
<title>Расширенная проверка формы</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<style>
.error{color:#F50B0E; padding:0 0 0 5px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){

$("#signup").validate({

rules:{
username:{
required: true,
minlength: 4,
maxlength: 16,
},

password:{
required: true,
rangelength:[6,16]
},
passagain:{
equalTo:'#password'
},
email:{
required:true,
email:true
},
age:{
required:true,
date:true
},
tel:{
required:true,
digits:true
},
trade:"required",

hobby:"required",
loc:"required"
},

messages:{

username:{
required: "Это поле обязательно для заполнения",
minlength: "Логин должен быть минимум 4 символа",
maxlength: "Максимальное число символо - 16",
},

password:{
required: "Это поле обязательно для заполнения",
rangelength:"Ваш паропь допжен содержать от 6 до 16 симвопов."
},
passagain:{
equalTo:"Введенные паропи не совпадают"
},
email:{
required:"Введите адрес электронной почты",
email:"Это не корректный адрес электронной почты"

},
age:{
required:"Введите дату рождения в формате: ММ/ДД/ГГГГ",
date:"Дата должна иметь формат: ММ/ДД/ГГГГ"
},
tel:{
required:"Введите номер телефона в формате:12342343",
digits:"Телефон должен иметь формат:12342343"
},
trade:{
required:"Вы не ввели специальность"
},

hobby:{

required:"Отметьте один из вариантов",
},
loc:{

required:"Выберите вариант ответа"
}
},
errorPlacement:function(error,element){
if(element.is(":radio")||element.is(":checkbox")){
error.appendTo(element.parent());
}else{
error.insertAfter(element);
}

}

});

});
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:750px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-indent fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Расширенная проверка формы</h2>
<form action="#" method="post" name="signup" id="signup">
<fieldset class="w3-card-4">
<legend class="w3-card-2 w3-large" style="padding:0 5px">Форма регистрации</legend>
<label for="username">Логин</label><br>
<input name="username" type="text" id="username" ><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" id="password" ><br>
<label for="passagain">Подтверждение пароля</label><br>
<input name='passagain' type="password" id="passagain"><br>
<label for="email">Email</label><br>
<input type="email" name="email" id="email"><br>
<label for="age">Дата рождения</label><br>
<input name="age" type="text" id="age" ><br>
<label for="tel">Телефон</label><br>
<input type="tel" name="tel" id="tel"><br>
<label for="trade">Специальность</label><br>
<select name="trade" id="trade" >
<option></option>
<option>Веб-программист</option>
<option>Веб-дизайтер</option>
<option>IT-специалист</option>
<option>Хакер</option>
</select><br><br>
<div><span>Хобби:</span>
<label for="tourism">Туризм</label>
<input type="checkbox" name="hobby" id="tourism" value="tourism" >
<label for="chess">Шахматы</label>
<input type="checkbox" name="hobby"id="chess" value="chess">
<label for="heliskiing">Горные лыжи</label>
<input type="checkbox" name="hobby" id="heliskiing" value="heliskiing">
</div>
<label for="his">
<input type="radio" name="loc" id="his" value="yes" > Я использую свой компьютер
</label><br />
<label for="overall">
<input type="radio" name="loc" id="overall" >
Я использую общий компьютер
</label><br /><br />
<input type="submit" name="submit" id="submit" value="Отправить" ><br><br>
</fieldset>
</form>
</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</div>
</body>
</html>