События
Для начала, стоит запомнить события, с которыми чаще всего придется работать:
change
изменение значения элемента
submit
отправка формы
В каких же случаях они нам помогут? Да всё просто – отслеживание change
позволяет обрабатывать такие события, как изменение элементов <select>
, <input type="radio">
и прочих. Это потребуется для динамического изменения формы или проверки введённого значения.
Отслеживание submit
необходимо для проверки правильности заполнения всех полей формы, а также для отправки формы посредством AJAX.
Начнём с последнего, для начала возьмём форму попроще:
<form action="index.html">
<input type="text" name="firstname" value="Ivan"/>
<input type="text" name="lastname" value="Ivanov"/>
<input type="submit"/>
</form>
И попробуем отправить её по адресу из атрибута «action
» посредством AJAX-запроса (для отслеживания события submit
можно использовать одноименный «shorthand» метод):
$("form").submit(function(){
// для читаемости кода
let $form = $(this);
// вы же понимаете, о чём я тут толкую?
// это ведь одна из ипостасей AJAX-запроса
$.post(
$form.attr("action"), // ссылка куда отправляем данные
$form.serialize() // данные формы
);
// отключаем действие по умолчанию
return false;
});
Тут затесался один незнакомый метод — serialize()
, он в ответе за «сбор» данных с формы в удобном для передачи данных формате:
firstname=Ivan&lastname=Ivanov
Также есть метод serializeArray()
— он представляет собранные данные в виде объекта:
[
{
"name": "firstname",
"value": "Ivan"
},
{
"name": "lastname",
"value": "Ivanov"
}
]
Хоть данная глава и про события, но всё же без методов нам дальше не обойтись — встречайте метод, который нам будет частенько нужен:
val()
получение значения первого элемента формы из выборки
val(value)
установка значения всем элементам формы из выборки
Теперь, с его помощью, мы можем добавить в предыдущий код немного проверки данных:
if ($form.find("input[name=firstname]").val() === "") {
alert("Введите имя пользователя");
return false;
}
Хорошо, работать с формой теперь можем, осталось прикрутить более вменяемый вывод ошибок (да-да, за alert()
бьём по рукам):
if ($form.find("input[name=firstname]").val() === "") {
$form.find("input[name=firstname]")
.after('<div class="error">Введите имя</div>');
return false;
}
При повторной отправке формы не забудьте убрать сообщения, оставшиеся от предыдущей проверки:
$form.find('.error').remove()
Теперь можно объединить кусочки кода и получить следующий вариант:
$('form').submit(function() {
// для читаемости кода
let $form = $(this);
// чистим ошибки
$form.find('.error').remove();
// проверяем поле с именем пользователя
if ($form.find('input[name=firstname]').val() === '') {
// добавляем текст ошибки
$form.find('input[name=firstname]')
.after('<div class="error">Введите имя</div>');
// прерываем дальнейшую обработку
return false;
}
// всё хорошо – отправляем запрос на сервер
$.post(
$form.attr('action'), // ссылка куда отправляем данные
$form.serialize() // данные формы
);
// отключаем действие по умолчанию
return false;
});
Предыдущий пример уже добавлен на страницу form.basic.html, попробуйте отправить форму; получившийся запрос и ответ вы сможете изучить в консоли браузера:
Я хотел ещё вернуться к списку событий формы и перечислить недостающие:
focus
фокус на элементе, для работы с данным событием так же есть «shorthand» метод focus()
; потребуется, если надо вывести подсказку к элементу формы при наведении
blur
фокус ушёл с элемента + метод blur()
; пригодится при валидации формы по мере заполнения полей
select
выбор текста в «textarea
» и «input[type=text]
» + метод select()
; если соберётесь разрабатывать свой WYSIWYG, то познакомитесь очень плотно
Примеры отслеживания всех событий формы доступны на странице events.form.html:
Last updated