На этом шаге мы рассмотрим изменение индикации обязательных полей.
В нашей форме ввода контактной информации обязательные поля имеют атрибут class="required", что позволяет использовать его не только для реализации отклика на ввод пользователя, но и для визуального оформления. Все поля ввода, определяющие способ связи с пользователем, имеют атрибут class="conditional". Мы будем использовать эти классы для замены текста инструкций, выводимых в круглых скобках справа от каждого поля ввода.
Начнем с установки значений переменных requiredFlag и conditionalFlag, а затем заполним элементы <span>, следующие за обязательными и условно-обязательными полями, текстом, хранящимся в этих переменных:
$(document).ready(function() {
var requiredFlag = ' * ';
var conditionalFlag = ' ** ';
$('form :input')
.filter('.required')
.next('span').text(requiredFlag).end()
.end()
.filter('.conditional')
.next('span').text(conditionalFlag);
});
Результаты выполнения этого скрипта приведены на рисунке 1.
Рис.1. Замена сообщений об обязательных полях
Использование метода .end() позволяет нам расширить цепочку методов, чтобы мы могли продолжать работать с тем же набором элементов и свести к минимуму количество операций по созданию объектов и обходу дерева DOM. Вызов метода .end() выполняет один шаг назад в цепочке операций выбора элементов, возвращая набор элементов, который существовал перед последним вызовом метода, выполняющего обход дерева DOM. Здесь мы выполняем подряд два вызова метода .end(): первый вызов возвращает набор элементов, полученный вызовом метода .filter('.required'), а второй возвращает набор элементов, полученный вызовом функции $('form :input'). Благодаря этому, когда производится вызов .filter('.conditional'), отбирающий элементы с атрибутом class="conditional", выборка производится из всех элементов ввода внутри формы.
Далее, так как одиночная звездочка (*) может оказаться не очень заметным индикатором для привлечения внимания пользователя, для всех обязательных полей мы также добавим к элементу <label> атрибут class="req-label" и применим правило font-weight: bold к этому классу. Для этого можно расширить цепочку методов еще больше.
$(document).ready(function() {
var requiredFlag = ' * ';
var conditionalFlag = ' ** ';
$('form :input')
.filter('.required')
.next('span').text(requiredFlag).end()
.prev('label').addClass('req-label').end()
.end()
.filter('.conditional')
.next('span').text(conditionalFlag);
});
Результаты выполнения этого скрипта приведены на рисунке 2.
Рис.2. Выделение меток обязательных полей жирным шрифтом
Такая длинная цепочка методов достаточно сложно воспринимается на глаз, поэтому в подобных случаях большое значение имеют непротиворечивое использование разрывов строк и введение отступов.
На следующем шаге мы продолжим изучение этого вопроса.
