Все поля обязательны к заполнению ошибка

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

Используем CSS

В CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле), :invalid (невалидное), :required (обязательное) и :optional (необязательное). Их можно использовать, чтобы добавлять некоторые — хотя и весьма ограниченные — подсказки пользователям, заполняющим форму.

Используя :valid и :invalid, мы можем показать пользователю, правильно ли заполнено поле по мере ввода.

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

Однако с этим способом связана одна проблема: стили применяются до того, как пользователь начнёт работу с формой. Поля, обязательные для заполнения, сразу подсветятся нам как :invalid, а необязательные — как :valid. Это значит, что пользователь, даже не приступив к заполнению формы, может сразу же получить негативную обратную связь. Не очень-то хорошо.

Стилизация состояний :required и :optional сама по себе не особо полезна, поскольку эта информация обычно указывается в подписях к полям формы. Однако мы можем объединить эти состояния с псевдоклассами :valid / :invalid и стилизовать их комбинации. Например, мы хотим показывать лишь положительный результат, когда валидно обязательное к заполнению поле.

input:required:valid {
  border-color: green;
}

Используем JavaScript

JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.

<form>
  <label>
    Number Input 1
   <input type="number" min="10" max="100" step="10">
  </label>

  <label>
    Number Input 2
   <input type="number" min="10" max="100" step="10">
  </label>

  <label>
    Number Input 3
   <input type="number" min="10" max="100" step="10">
  </label>

  <input type="submit">
</form>

Устанавливая атрибуты min, max и step, мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит 1, 12 и 123 в три поля и отправит форму:

В результате всё, что получит пользователь — это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.

Добавляем несколько сообщений об ошибках в один тултип

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

input.validity = {
  valid: false // Поле валидно
  customError: false // Установленно специальное сообщение ошибки
  patternMismatch: false // Значение не удовлетворяет шаблону, установленному в атрибуте pattern
  rangeOverflow: false // Значение превосходит атрибут max
  rangeUnderflow: true // Значение меньше атрибута min
  stepMismatch: true // Значение не соответствует указаному шагу
  tooLong: false // Значение слишком длинное
  tooShort: false // Значение слишком короткое
  typeMismatch: false // Значение не соответствует указаному атрибуту type
  valueMissing: false // Отсутствует обязательное значение
};

Примечание переводчика: Слово «mismatch» переводится как «несоответствие». Поэтому в значениях patternMismatch, stepMismatch и typeMismatch обратная логика: true — значение не удовлетворяет атрибуту, false — удовлетворяет.

По умолчанию браузер отобразит лишь одну ошибку. Что мы можем сделать, так это проверить все эти значения самостоятельно и, если найдутся ошибки, сохранить их. Как только мы сохраним все ошибки для одного поля, мы можем отобразить весь их список в виде специального сообщения об ошибке при помощи функции setCustomValidity().

function CustomValidation() { }

CustomValidation.prototype = {
  // Установим пустой массив сообщений об ошибках
  invalidities: [],

  // Метод, проверяющий валидность
  checkValidity: function(input) {

    var validity = input.validity;

    if (validity.patternMismatch) {
      this.addInvalidity('This is the wrong pattern for this field');
    }

    if (validity.rangeOverflow) {
      var max = getAttributeValue(input, 'max');
      this.addInvalidity('The maximum value should be ' + max);
    }

    if (validity.rangeUnderflow) {
      var min = getAttributeValue(input, 'min');
      this.addInvalidity('The minimum value should be ' + min);
    }

    if (validity.stepMismatch) {
      var step = getAttributeValue(input, 'step');
      this.addInvalidity('This number needs to be a multiple of ' + step);
    }

    // И остальные проверки валидности...
  },

  // Добавляем сообщение об ошибке в массив ошибок
  addInvalidity: function(message) {
    this.invalidities.push(message);
  },

  // Получаем общий текст сообщений об ошибках
  getInvalidities: function() {
    return this.invalidities.join('. \n');
  }
};

// Добавляем обработчик клика на кнопку отправки формы
submit.addEventListener('click', function(e) {
  // Пройдёмся по всем полям
  for (var i = 0; i < inputs.length; i++) {

    var input = inputs[i];

    // Проверим валидность поля, используя встроенную в JavaScript функцию checkValidity()
    if (input.checkValidity() == false) {

      var inputCustomValidation = new CustomValidation(); // Создадим объект CustomValidation
      inputCustomValidation.checkValidity(input); // Выявим ошибки
      var customValidityMessage = inputCustomValidation.getInvalidities(); // Получим все сообщения об ошибках
      input.setCustomValidity(customValidityMessage); // Установим специальное сообщение об ошибке

    } // закончился if
  } // закончился цикл
});

Теперь при попытке отправить форму мы увидим вот это:

Отображаем несколько ошибок в одном тултипе

Стало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем. Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.

Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.

Показываем все ошибки для всех полей

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

Этого можно добиться какой-то парой дополнительных строчек в нашем коде:

CustomValidation.prototype.getInvaliditiesForHTML = function() {
  return this.invalidities.join('. <br>');
}

// Добавляем обработчик клика на кнопку отправки формы
submit.addEventListener('click', function(e) {
  // Пройдёмся по всем полям
  for (var i = 0; i < inputs.length; i++) {

    var input = inputs[i];

    // Проверим валидность поля, используя встроенную в JavaScript функцию checkValidity()
    if (input.checkValidity() == false) {

      var inputCustomValidation = new CustomValidation(); // Создадим объект CustomValidation
      inputCustomValidation.checkValidity(input); // Выявим ошибки
      var customValidityMessage = inputCustomValidation.getInvalidities(); // Получим все сообщения об ошибках
      input.setCustomValidity(customValidityMessage); // Установим специальное сообщение об ошибке

      // Добавим ошибки в документ
      var customValidityMessageForHTML = inputCustomValidation.getInvaliditiesForHTML();
      input.insertAdjacentHTML('afterend', '<p class="error-message">' + customValidityMessageForHTML + '</p>')
      stopSubmit = true;

    } // закончился if
  } // закончился цикл

  if (stopSubmit) {
    e.preventDefault();
  }
});

Вот что происходит при клике на submit теперь:

Используем нестандартные проверки валидности

Иногда встроенной в браузер валидации бывает недостаточно. Нам может понадобиться, чтобы вводимые данные удовлетворяли некоторым дополнительным правилам. Например, чтобы в текстовом поле требовалось указать особые символы.

Так как мы уже проверяем все возможные ошибки вручную в нашей функции CustomValidation.prototype.checkValidity, мы можем просто-напросто добавить туда ещё несколько проверок.

CustomValidation.prototype.checkValidity = function(input) {

  // Тут идут встроенные проверки валидности

  // А тут специальные
  if (!input.value.match(/[a-z]/g)) {
    this.addInvalidity('At least 1 lowercase letter is required');
  }

  if (!input.value.match(/[A-Z]/g)) {
    this.addInvalidity('At least 1 uppercase letter is required');
  }
};

Валидация в реальном времени

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

1. Требования для каждого поля чётко видны до того, как пользователь начал печатать.
2. Как только пользователь начинает вводить данные, соблюдая требования, он сразу видит индикатор успешного заполнения поля или подсказки, если есть ошибки.
3. Нужно отображать сообщения об ошибках таким образом, чтобы пользователь не мог отправить некорректно заполненную форму.

Если вы хотите попробовать свои силы (и даже сделать получше), вы можете воспользоваться вот этим шаблоном.

---

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Сергей Шейпак

20 апреля 2010

Время на прочтение
4 мин

Количество просмотров 5.5K

Путеводитель: Часть 1. Вступление ● Часть 2. Речевой барьер ● Часть 3. Ошибки в формах ● Часть 4. Ошибки на сервере ● Часть 5. Рука помощи

01 Важным элементом взаимодействия сайта с пользователем являются формы ввода данных (или просто формы), а также отдельные их элементы. Форма может быть представленна одной кнопкой OK или же целым набором текстовых полей, списков выбора, чекбоксов и радиобаттанов. Сегодня я буду говорить именно о втором случае, когда элементов много.

«Хорошая форма — это форма, которая заполняется быстро и легко, даже если в ней много элементов»

02 Что представляет из себя хорошая форма? Хорошая форма — это форма, которая заполняется быстро и легко, даже если в ней много элементов. Быстрота заполнения формы зависит от того, насколько хорошо пользователь понимает, как её заполнять. Это сравнимо с заполнением бланков в какой-нибудь организации. Только, если в случае с бумажками, вам помогает красивая девушка, то здесь должна помоч правильная подача ошибок и их предотвращение.

03 Я разделяю все формы на активные и пассивные. Отличие этих форм в том, что активные сразу предупреждают пользователя о допущенной ошибке, а пассивные выдают ее только после отправки запроса. Сказать, какие из них лучше, будет плохим тоном, потому что и те и другие актуальны на данный момент. Пассивные формы используются обычно в сервисах, рассчитанных на широкий контингент пользователей, т. к. некоторые пользователи умышленно отключают поддержку технологий, на которых основываются активные формы (JavaScript). Для каждого вида есть свои правила подачи ошибок, которых я отчасти касался в предыдущих статьях и о которых я вспомню сегодня. Ну что ж, приступим.

«Каждая ошибка по возможности должна быть предотвращена»

04 Предотвращение ошибок в пассивных формах. Недавно я опять переосмысливал устройство регистрационной формы в Gmail. В этой пассивной форме меня привлекли следующие вещи. Во-первых, в ней отсутствует выделение обязательных для заполнения полей. Совершенно ясно, что здесь должно заполняться каждое поле (хотя зачем я должен указывать свою фамилию?), тем не менее, это может породить ненужные ошибки и затянуть процесс заполнения формы. Возможно, стоило написать на видном месте, что все поля обязательны для заполнения. Во-вторых, Google перепутали пояснительный текст с ошибкой:

Форма регистрации аккаунта в Gmail

Примеры, это, конечно, хорошо, но их явно не достаточно. Как вариант, текст ошибки должен был выглядеть следующим образом: «Поле заполнено неправильно», а то, что выдает Gmail сейчас, должно было быть написано под или над полем. С одной стороны это хороший метод, но с другой есть риск превратить интерфейс в нечеловечный. Представьте себе, что все ошибки будут вида: «Поле заполнено неправильно»,— брр:

Форма регистрации аккаунта на Free-lance.ru

По сему, рекомендую использовать это только в маленьких пассивных формах, а для больших форм применять другое решение. Взгляните на неправильно заполненное поле пароля:

Форма регистрации аккаунта в Gmail

Зачем дублировать информацию? Суть второго метода в том, чтобы подсветить красным пояснительный текст и выдать его за ошибку. Таким образом пользователь не будет думать, как верно заполнить поле, а сразу узнает это. Мне кажется, если бы дизайнеры Gmail использовали эти рекомендации, то я бы заполнил форму быстрее. Каждая ошибка по возможности должна быть предотвращена. Запомните это.

05 Подача ошибок в пассивных формах. Здесь действуют рекомендации, приведённые в предыдущих статьях (во Вступлении и Речевом барьере). Давайте вспомним их:
— необходимо использовать привязанность ошибок к их причинам или размещать их в ожидаемом месте (иначе: размещать их с неправильно заполненным полем);
— если нет возможности использовать привязанность, использовать цветовое кодирование (иначе: выделять одним цветом ошибочное поле и выноску);
— писать текст ошибки только на языке интерфейса сайта;
— формулировать ошибку четко, не используя литературных оборотов и неправильных словесных последовательностей.

«Главное правило активной формы: она должна посылать запрос лишь один раз за случай»

06 Организация активной формы. Итак, начнем с хорошего примера:

Форма загрузки изображений на Flickr.com

Главное правило активной формы: она должна посылать запрос лишь один раз за случай. Это достигается путем анализа на лету введённых в форму данных и мгновенной выдачи ошибки, а также выключением кнопки Отправить. Если кнопка отправить включается до того, как все ошибки исправлены, то такая форма не представляет большой ценности и не намного улучшает процесс её заполнения:

Форма отправки заяквки в Бизнес-линч

Я узнал о том, что моя фотография больше, только после того, как нажал на Отправить, которая почему-то включилась.

07 Предостерегать же пользователя от ошибок в этом случае можно по-разному. Использовать ли навороченные поп-ап окна, в которых, при наведении на поле будет показываться пояснение, для придания больше заметности или просто написать снизу, что в логине можно использовать только латинские буквы от A до Z, зависит от ваших задач и фантазии:

Первый шаг регистрации на Photobucket.com

08 Основные правила подачи ошибок в активной форме не отличаются от правил пассивной формы. Единственное, у вас появляется возможность для эксперементов и создания новых интересных решений подачи ошибок. Это, опять же, зависит от вашей фантазии.

Оригинал статьи можно найти в моём жж.
Роман Горшков (FUEL)