На этом шаге мы рассмотрим вариант заключительной проверки введенных данных.
На этом реализация проверки содержимого формы ввода контактной информации почти закончена. Однако мы могли бы выполнить еще одну проверку в момент, когда пользователь попытается отправить ее, на этот раз всех полей формы сразу. С помощью обработчика события .submit() формы (а не кнопки Отправить) мы запускаем событие blur для всех обязательных полей:
$(document).ready(function() { $('form').submit(function() { $('#submit-message').remove(); $(':input.required').trigger('blur'); }); });
Обратите внимание на строку, где удаляется элемент, который еще не существует: <div id="submit-message">. Мы добавим этот элемент на следующем шаге. Здесь мы просто заранее предусмотрели его удаление, зная, что это придется сделать, на примере встретившихся ранее проблем, которые проявлялись в создании нескольких сообщений об ошибках.
После запуска событий blur к некоторым элементам в текущей форме может добавиться класс warning. Если появится хотя бы один такой элемент, мы создадим новый элемент <div id="submit-message"> и вставим его непосредственно перед кнопкой Отправить, куда вероятнее всего в этот момент смотрит пользователь. Мы также прервем операцию передачи формы:
$(document).ready(function() { $('form').submit(function() { $('#submit-message').remove(); $(':input.required').trigger('blur'); var numWarnings = $('.warning', this).length; if (numWarnings) { $('<div></div>') .attr({ 'id': 'submit-message', 'class': 'warning' }) .append('Исправьте ошибки в ' + numWarnings + ' полях') .insertBefore('#send'); return false; }; }); });
Помимо типичного предложения исправить ошибки, сообщение содержит число полей, в которые необходимо внести исправления, как показано на рисунке 1.
Рис.1. Сообщение указывает количество полей с ошибками (Нажмите кнопку Отправить)
Полный текст этого примера можно взять здесь.Можно сделать даже лучше - вместо того, чтобы выводить число оши бок, мы можем перечислить названия полей, содержащих ошибки:
$(document).ready(function() { $('form').submit(function() { $('#submit-message').remove(); $(':input.required').trigger('blur'); var numWarnings = $('.warning', this).length; if (numWarnings) { var fieldList = []; $('.warning label').each(function() { fieldList.push($(this).text()); }); $('<div></div>') .attr({ 'id': 'submit-message', 'class': 'warning' }) .append('Исправьте ошибки в ' + numWarnings + ' полях:<br />') .append('• ' + fieldList.join('<br />• ')) .insertBefore('#send'); return false; }; }); });
Во-первых, мы добавили переменную fieldList, которую инициализировали пустым массивом. Затем мы получили набор элементов label, являющихся потомками элементов с классом warning, и добавили их текстовое содержимое в массив fieldList (с помощью обычной функции JavaScript push()). Теперь текст каждой подписи хранится в виде отдельного элемента массива fieldList.
Мы немного изменили предыдущую версию содержимого элемента <div id="submit-message"> и добавили в него содержимое нашего массива fieldList. Для преобразования массива в строку была использована обычная функция JavaScript join(); мы объединили все элементы массива, разделив их символом разрыва строки и маркером. В результате теперь сообщение выглядит так, как показано на рисунке 2.
Рис.2. Сообщение содержит имена полей с ошибками (Нажмите кнопку Отправить)
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим манипулирование флажками.