На этом шаге мы рассмотрим обработку незаполненных условно-обязательных полей.

    Для условно-обязательных полей желательно создать немного иное сообщение, информирующее о том, что поле обязательно, только когда отмечен соответствующий флажок. Мы будем добавлять квалифицирующее сообщение в конец стандартного сообщения об ошибке. Для этого добавим еще одну условную инструкцию if, которая будет проверять наличие класса conditional только в случае выполнения двух первых условий:

$(document).ready(function() {
  $('form :input').blur(function() {
    
    if ($(this).hasClass('required')) {
      var $listItem = $(this).parents('li:first');
      if (this.value == '') {
        var errorMessage = 'Это обязательное поле';
        if ($(this).is('.conditional')) {
          errorMessage += ', когда установлен флажок';
        }
        $('<span></span>')
          .addClass('error-message')
          .text(errorMessage)
          .appendTo($listItem);
        $listItem.addClass('warning');
      }
    }
  });
});

    Когда поле ввода теряет фокус ввода в первый раз, наш программный код прекрасно справляется со своими обязанностями; однако, когда пользователь повторно входит в поле ввода и выходит из него, возникают две проблемы, как показано на рисунке 1.

Рис.1. Многократное повторение текста сообщения об ошибке

    Если поле по-прежнему остается незаполненным, сообщение об ошибке будет повторено столько раз, сколько раз пользователь будет покидать поле. Если пользователь заполнит поле, класс class="warning" не будет удален. Безусловно, нам необходимо, чтобы рядом с полем выводилось только одно сообщение, и нам требуется удалить сообщение, когда пользователь исправит ошибку. Ликвидировать обе проблемы можно удалением класса class= "warning" из родительского элемента <li> текущего поля и <span class="error-message"> из того же элемента <li> всякий раз, когда поле теряет фокус ввода, непосредственно перед выполнением проверки:

$(document).ready(function() {
  $('form :input').blur(function() {
    $(this).parents('li:first').removeClass('warning')
    .find('span.error-message').remove();
    
    if ($(this).hasClass('required')) {
      var $listItem = $(this).parents('li:first');
      if (this.value == '') {
        var errorMessage = 'Это обязательное поле';
        if ($(this).is('.conditional')) {
          errorMessage += ', когда установлен флажок';
        }
        $('<span></span>')
          .addClass('error-message')
          .text(errorMessage)
          .appendTo($listItem);
        $listItem.addClass('warning');
      }
    }
  });
});

    Наконец, мы получили функционирующий сценарий проверки обязательных и условно-обязательных полей. Даже после повторного входа и выхода из обязательного поля сообщение об ошибке отображается корректно.

    Заметим также, что нам необходимо также удалять класс warning и <span class="error-message"> из элемента <li>, когда пользователь снимает соответствующий флажок! Для реализации этого мы можем вернуться к программному коду, обрабатывающему флажки, и добавить в него запуск события blur для соответствующего поля ввода в случае снятия флажка:

$(document).ready(function() {
  $('input.conditional').next('span').andSelf().hide()
  .end().end()
  .each(function() {
    var $thisInput = $(this);
    var $thisFlag = $thisInput.next('span');
    $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').blur();
        $thisFlag.hide();
        $(this).parent('label').removeClass('req-label');
      }
    });
  });
});

    Теперь, когда пользователь будет снимать флажок, соответствующий класс warning и сообщение об ошибке будут удаляться.

Рис.2. Теперь текст сообщения об ошибке выводится всего один раз

    На следующем шаге мы рассмотрим обязательные форматы.

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