На этом шаге мы рассмотрим вариант заключительной проверки введенных данных.

    На этом реализация проверки содержимого формы ввода контактной информации почти закончена. Однако мы могли бы выполнить еще одну проверку в момент, когда пользователь попытается отправить ее, на этот раз всех полей формы сразу. С помощью обработчика события .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. Сообщение содержит имена полей с ошибками (Нажмите кнопку Отправить)

    На следующем шаге мы рассмотрим манипулирование флажками.

Предыдущий шаг Содержание Следующий шаг