На этом шаге мы рассмотрим организацию вывода сообщений на незаполнение обязательных полей.
В нашей форме ввода контактной информации мы будем проверять содержимое каждого поля ввода, имеющего класс required, когда пользователь будет нажимать клавишу табуляции или выполнять щелчок мышью за пределами поля. Однако прежде чем перейти к соответствующему программному коду, мы должны ненадолго вернуться к нашим условно-обязательным полям ввода. Чтобы упростить процедуру проверки, мы можем добавлять класс required к элементу <input>, когда он видим, и удалять этот класс, когда выполняется скрытие элемента <input>. Ниже приводится программный код, реализующий эту особенность:
$thisInput.prev('label').find(':checkbox')
.attr('checked', false)
.click(function() {
if (this.checked) {
$thisInput.show().addClass('required');
$thisFlag.show();
$(this).parent('label').addClass('req-label');
} else {
$thisInput.hide().removeClass('required');
$thisFlag.hide();
$(this).parent('label').removeClass('req-label');
}
});
Разобравшись с классом required, мы готовы отреагировать на событие потери полем фокуса ввода, при котором оно остается пустым. Сообщение будет помещаться рядом с индикатором обязательного поля, а к элементу <li>, вмещающему это поле, будет добавляться класс class="warning" для получения возможности предупредить пользователя:
$(document).ready(function() {
$('form :input').blur(function() {
if ($(this).hasClass('required')) {
var $listItem = $(this).parents('li:first');
if (this.value == '') {
var errorMessage = 'Это обязательное поле';
$('<span></span>')
.addClass('error-message')
.text(errorMessage)
.appendTo($listItem);
$listItem.addClass('warning');
}
}
});
});
В обработчике события blur, подключаемого к каждому элементу формы, присутствуют две условные инструкции if: первая проверяет наличие класса required, а вторая - содержит ли поле пустую строку. В случае соблюдения обоих условий мы создаем сообщение об ошибке, вставляем его в элемент <span class="error-message"> и добавляем все это в конец родительского элемента <li>.
Рис.1. Реализация вывода сообщений
Полный текст этого примера можно взять здесь.На следующем шаге мы продолжим изучение этого вопроса.
