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

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

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

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

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

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

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

События формы

События формы

Когда посетитель подтверждает заполнение формы нажатием кнопки Подтвердить (Submit) или клавиши Enter, происходит событие submit. Вы можете выполнить сценарий во время подтверждения формы. Таким образом, код JavaScript может верифицировать элементы формы на предмет их корректного заполнения. Когда форма подтверждена, программа JavaScript проверяет ее элементы и при обнаружении проблем останавливает передачу и сообщает посетителю причину отказа. Если все заполнено верно, то форма передается как обычно.

Для выполнения функции при наступлении события подтверждения формы сначала выберем форму, затем применим jQuеrу-функцию submit(), чтобы добавить в наш сценарий. Если нам нужно убедиться, что при передаче формы поле с именем, заполнено, то сделать это можно путем добавления события подтверждения в форму и проверки значения элемента перед ее отправкой. Если поле пусто, то вам нужно дать знать об этом посетителю и остановить процесс передачи формы. В противном случае форма будет передана с пустым полем.

Если посмотреть на НТМL-код формы, то мы увидим, что форма имеет идентификатор signup, а поле ввода имени - идентификатор username. Верифицировать эту форму с помощью библиотеки j Query можно так:

$(document).ready(function(){    
$('#signup').submit(function(){
if($("#username").val()==''){ 
alert('Введите имя в поле "Имя".');
return false; 
}
});
});

Строка 1 вводит необходимую функцию $ (document).ready(), так что код выполняется только после загрузки НТМL-кода страницы. Строка 2 присоединяет функцию к событию формы submit. Строки 3-6 выполняют проверку. Строка 3 проверяет, не является ли значение элемента формы пустой строкой (' '). Если элемент пуст, то появляется окно оповещения, дающее посетителю понять, что он ошибся. Строка 5 очень важна: она останавливает процесс передачи формы. Если пропустить этот шаг, то форма будет передана без имени пользователя.

Остановить отправку формы можно также с помощью функции объекта события prevent-Default()

$('form').submit(function(evt){ 
// остановить отправку формы 
evt.preventDefault();
}); 

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

 $('form').submit(function(){
// код, выполняемый во время отправки формы 
}); 

Активное состояние

Когда текстовый курсор находится в поле (либо после щелчка по элементу формы кнопкой мыши, либо при переходе на него с помощью клавиши ТаЬ ), элемент формы переходит в активное состояние, называемое focus. Фокус представляет собой событие, запускаемое браузером и указывающее на то, что текстовый курсор находится в конкретном поле или выделен определенный элемент формы. Мы можем быть уверены, что именно здесь сосредоточено внимание посетителя. Вероятно, мы не будем использовать это событие слишком часто, но некоторые дизайнеры применяют его для удаления любого текста, который уже присутствует в поле. Например, у вас есть следующий НТМL-код внутри формы:

<input name="name" type="text" id="username" value="Пожалуйста, введите ваше имя">

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


$("#username").focus(function() {
var field = $(this);
if(field.val() == field.attr('Value')){
field.val('');
}
});

Строка 1 выбирает поле (имеющее идентификатор username) и присваивает функцию событию focus. Строка 2 создает переменную field, которая хранит ссылку на выборку jQuery, ключевое слово $(this) ссылается на выбранный элемент внутри jQuеrу-функции, в нашем случае - на элемент формы. Строка 4 стирает содержимое поля. Она задает новое значение (пустую строку ('')) элемента формы, удаляя таким образом любое присутствующее в поле значение. Однако вам не нужно обнулять значение этого элемента всякий раз, когда он оказывается в фокусе. Например, пользователь выделил поле и вместо прежней надписи ввел свое имя. Если затем текстовый курсор покинет данное поле, а потом вернется, то введенное имя не должно исчезнуть. Вот когда вступает в игру управляющая инструкция, содержащаяся в строке 3.

Текстовые поля имеют атрибут Value, представляющий текст, содержащийся в поле при первоначальной загрузке страницы. Даже если вы стерли этот текст, браузер будет его помнить. Управляющая инструкция проверяет, соответствует ли текущий текст поля (field.val()) тому, который был первоначально (field.attr('Value')). Если текст совпадает, то интерпретатор стирает текст в поле.

Формы HTML5 предусматривают атрибут placeholder, который позволяет поместить временное сообщение в текстовое поле. Когда посетитель начинает ввод данных, этот заполнитель стирается:

<input name="name" type="text" id="username" placeholder="Пожалуйста, введите ваше имя">

Данная техника проще, чем вышеописанный способ использования библиотеки jQuery, однако атрибут placeholder не работает в браузере lnternet Explorer 9 или более ранней версии.


$(document).ready(function(){
$("#username").focus(function() {
var field = $(this);
if(field.val() == field.attr('Value')){
field.val('');
}
});
$("#surname").focus(function() {
var bent = $(this);
if(bent.val() == bent.attr('Value')){
bent.val('');
}
})
$('#signup').submit(function(){
if($("#username").val()==''){
alert('Введите имя в поле "Имя".');
return false;
}
else if($("#username").val()== $("#username").attr('Value')){
alert('Введите имя в поле "Имя".');
return false;
}
if($("#surname").val()==''){
alert('Введите фамилию в поле "Фамилия".');
return false;
}
else if($("#surname").val()== $("#surname").attr('Value')){
alert('Введите фамилию в поле "Фамилия".');
return false;
})
});
<!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>
input[type="text"]{width:250px; font-size:12px}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#username").focus(function() {
var field = $(this);
if(field.val() == field.attr('Value')){
field.val('');
}
});
$("#surname").focus(function() {
var bent = $(this);
if(bent.val() == bent.attr('Value')){
bent.val('');
}
})
$('#signup').submit(function(){
if($("#username").val()==''){
alert('Введите имя в поле "Имя".');
return false;
}
else if($("#username").val()== $("#username").attr('Value')){
alert('Введите имя в поле "Имя".');
return false;
}
if($("#surname").val()==''){
alert('Введите фамилию в поле "Фамилия".');
return false;
}
else if($("#surname").val()== $("#surname").attr('Value')){
alert('Введите фамилию в поле "Фамилия".');
return false;
}
})
});
</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" value="Пожалуйста, введите ваше имя"><br>
<label for="surname">Фамилия</label><br>
<input name="surname" type="text" id="surname" value="Пожалуйста, введите вашу фамилию" ><br><br>
<label for="trade">Специальность</label><br>
<select name="trade" id="trade">
<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>

Не активное состояние

Когда мы покидаеем элемент формы или щелкаем кнопкой мыши за его пределами, браузер запускает событие blur, которое обычно применяется к полям text и textarea для выполнения сценария проверки формы, когда кто-то покидает заполненное текстовое поле. Например, у вас есть длинная форма с большим количеством вопросов, многие из которых требуют определенных типов ответов (электронные адреса, телефоны, почтовые индексы и т. д.). Допустим, посетитель не смог заполнить все элементы формы правильно, но нажал на кнопку отправки формы и получил длинный список ошибок, указывающих на неправильное заполнение формы. Вместо того чтобы сваливать на него все сразу, мы можем проверять значения элементов формы параллельно их заполнению. В таком случае при первой же ошибке посетитель сразу получит предупреждение и сможет ее исправить.

Предположим, у нас есть поле для сбора информации о количестве товаров, нужных клиенту. НТМL-код может иметь такой вид:

<input type="text" name="quantity" id="quantity">

Мы хотим убедиться, что поле содержит только числа и сделать это после того, как посетитель покинул данное поле:

$("#quantity").blur(function(e) {
    var fieldValue = $(this).val();
	if(isNaN(fieldValue)){
		alert("Пожалуста введите число");
	}
});

Строка 1 присваивает событию blur функцию. Строка 2 извлекает значение элемента формы и сохраняет его в переменной fieldValue. Строка 3 проверяет числовую природу значения методом isNaN(). Если значение не является числом, выполняется строка 4 и выводится сообщение об ошибке.