Шаг 164.
Библиотека jQuery.
Интерактивные формы. Улучшение простой формы. Заключительная проверка

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

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

Полный текст этого примера можно взять здесь.

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




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