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

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

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

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

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

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

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

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

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

HTML5 предусматривает множество функций, предназначенных для проверки форм, которые позволяют нам обойтись без JavaScript. К сожалению, несмотря на то, что многие последние браузеры поддерживают НТМL-проверку форм, Internet Explorer 9 и более ранние версии ее не поддерживают, кроме того, проблемы возникают и с настольной версией браузера Safari.

Плагин jQuery Validation

Validation (jqueryvalidation.org) - это мощный и вместе с тем простой в применении плагин библиотеки jQuery ( автор Йорн Зеферер ). Он может проверять форму на предмет заполнения всех нужных элементов и соответствия данных определенным требованиям. Например, поле ввода количества должно содержать число, а поле ввода адреса e-mail -электронный адрес. Если посетитель ввел данные в некорректной форме, плагин выдаст сообщение об ошибке с описанием проблемы.

Рассмотрим базовую схему процесса применения плагина Validation:

  1. Присоединим фaйл jquery.js к странице, которая содержит форму, подлежащую проверке.
  2. Присоединим плаrин Validation.
  3. Данный плагин можно найти по адресу: jqueryvalidation.org. Архив включает много дополнительного материала, в том числе демонстрации, тесты и др. Вам нужен только фaйл jquery.validate.min.js

    Подключить его можно и с помощью внешнего файла http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js

  4. Добавим правила проверки.
  5. Правила проверки - это просто инструкции, указывающие "сделать данный элемент формы обязательным для заполнения; убедить­ся, что данный элемент формы содержит адрес электронной почты и т. д.". Другими словами, на этом этапе вы определяете, какие элементы формы будут проверяться и каким образом.

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

  8. Применим функцию validate () к форме.
  9. Плагин включает функцию validate(). Сначала с помощью библиотеки jQuery выберем форму, а затем применим к выделенной форме функцию. Например, ваша форма имеет идентификатор signup.

Простейший способ провести проверку:

$("#signup").validate();

Функция validate () принимает в качестве аргумента самую разную информацию, влияющую на работу плагина.


$(document).ready(function(){
$("#signup").validate();
})
<!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">
<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();
});
</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:550px" >
<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="name" type="text" id="username" class="required" ><br>
<label for="surname">Фамилия</label><br>
<input name="surname" type="text" id="surname" class="required"><br>
<label for="trade">Специальность</label><br>
<select name="trade" id="trade" class="required" >
<option></option>
<option>Веб-программист</option>
<option>Веб-дизайтер</option>
<option>IT-специалист</option>
<option>Хакер</option>
</select><br><br>
<div><span>Хобби:</span>
<label for="tourism">Туризм</label>
<input type="checkbox" id="tourism" value="tourism" >
<label for="chess">Шахматы</label>
<input type="checkbox" id="chess" value="chess">
<label for="heliskiing">Горные лыжи</label>
<input type="checkbox" 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" checked="checked" >
Я использую общий компьютер
</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>

Простая проверка

Чтобы использовать плагин Validation, достаточно присоединить JavaScript-фaйл плагина, добавить нескольких атрибутов class и title к элементам формы, подлежащим проверке и применить к форме метод validate(). Метод validate() является простейшим способом проверки. Если же вам нужно управлять положением сообщений об ошибках, применить к элементу формы более одного правила или задать минимум/максимум знаков для текстового поля, то придется воспользоваться расширенным методом.

Создание правил проверки

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

Чтобы дать плагину понять, что данное поле обязательно для заполнения, другими словами, то, что форма не может быть отправлена, если это поле останется незаполненным, добавьте НТМL-элементу класс required. Например, чтобы сделать текстовое поле обязательным для заполнения, добавьте атрибут класса в НТМL-элемент:

x<input name="name" type="text" id="username" class="required" >
Плагин Validation включает методы, отвечающие наиболее распространенным требованиям проверки
Правило проверки Описание
required Элемент формы обязателен для заполнения, пометки или выбора
date Данные должны иметь формат ММ/ДД/ГГГГ. Например, дата 10/30/2014 считается корректной, а 10-30-2014 - нет
url Веб-адрес должен быть записан в полной форме типа https://sevidi.ru. Частичный URL-aдpec, например, www.sevidi.ru или sevidi.ru, является недействительным
email Электронный адрес должен иметь формат abc@abc.com. Этот класс не проверяет действительность введенного адреса, так что даже такой адрес, как nobody@noplace.com, успешно пройдет проверку
numЬer Данные должны быть числом типа 32 или 102.50 или даже -145.5555. Однако ввод символов, например, $45.00 или 100,000, недопустим
digits Данные должны быть положительными целыми числами. Числа 1, 20, 12333 являются корректными, а 10.33 или -12 - нет
creditcard Должен быть введен корректный номер кредитной карты

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

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

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

Например, существует поле для ввода даты рождения. Эта информация является не только обязательной, но и должна вводиться в специальном формате. НТМL-код для подобного элемента формы может иметь такой вид:

<input name="age" type="text" id="age" class="required date">

Заметьте, что имена классов - required и date - разделены пробелами.

Если вы исключите класс required и примените только тип проверки данных, например, class="date", тогда элемент формы окажется необязательным для заполнения, но, если информация в него всетаки вносится, она должна отвечать заданному формату.

Добавление сообщений об ошибках

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

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

<input type="email" name="email" class="required email" title="Пожалуйста, введите email в формате abc@abc.com ">

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


$(document).ready(function(){
$("#signup").validate();
})
<!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">
<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();
});
</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:650px" >
<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="name" type="text" id="username" class="required" title="Пожалуйста, введите имя" ><br>
<label for="surname">Фамилия</label><br>
<input name="surname" type="text" id="surname" class="required" title="Пожалуйста, введите фамилию"><br>
<label for="age">Дата рождения</label><br>
<input name="age" type="text" id="age" class="required date" title="Пожапуйста, введите дату в формате 01/28/2017" ><br>
<label for="email">Email</label><br>
<input type="email" name="email" class="required email" title="Пожалуйста, введите email в формате abc@abc.com "><br>
<label for="tel">Телефон</label><br>
<input type="tel" name="tel" class="required digits" title="Пожалуйста, введите телефон в формате 9163456789"><br>
<label for="trade">Специальность</label><br>
<select name="trade" id="trade" class="required" title="Пожалуйста, выберите пункт из списка" >
<option></option>
<option>Веб-программист</option>
<option>Веб-дизайтер</option>
<option>IT-специалист</option>
<option>Хакер</option>
</select><br><br>
<div><span>Хобби:</span>
<label for="tourism">Туризм</label>
<input type="checkbox" id="tourism" value="tourism" >
<label for="chess">Шахматы</label>
<input type="checkbox" id="chess" value="chess">
<label for="heliskiing">Горные лыжи</label>
<input type="checkbox" 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" checked="checked" >
Я использую общий компьютер
</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>