Отзыв об обязательном поле

Веб-функции: :user-valid и :user-invalid

Проблема

Если сразу после загрузки страницы обязательные поля будут помечены как содержащие ошибку, это может запутать пользователя. В идеале обязательное поле должно выглядеть как "недействительное", только если пользователь попытался заполнить его и потерпел неудачу.

Решение

Псевдокласс :user-invalid отлично решает эту проблему. Если поле обязательное, то при загрузке страницы совпадение не будет найдено. Соответствие будет установлено, только если:

  1. Пользователь взаимодействует с полем (например, вводит символ и удаляет его), а затем покидает его (размытие), оставляя его пустым.
  2. Пользователь пытается отправить форму, не заполнив поле.

Стратегия реализации

  1. Ограничение HTML. Добавьте атрибут required в поля ввода.
  2. Визуальная обратная связь. Используйте :user-invalid, чтобы выделить границу красным цветом и показать текст "Обязательно".
  3. Время. Положитесь на встроенные в браузер функции визуальной обратной связи. Обработчики onBlur больше не нужны для добавления класса touched, но для синхронизации атрибутов ARIA по-прежнему требуется JavaScript (см. ниже).

Руководство по внедрению

1. Структура HTML

<form id="feedback-form">
  <div class="field">
    <label for="full-name">Full Name</label>
    <input
      type="text"
      id="full-name"
      name="full-name"
      required
      aria-errormessage="name-error"
    >
    <!-- MANDATORY: Include an icon or distinct non-color indicator alongside error text -->
    <div id="name-error" class="error-msg">
      <span aria-hidden="true">❌</span> This field is required.
    </div>
  </div>
</form>

2. CSS

.error-msg {
  display: none;
  color: #d93025;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/*
  Only highlight empty required fields AFTER the user visits them.
  MANDATORY: Provide multiple indicators (border shift + helper text/icon) to avoid color-only state communication.
*/
input:user-invalid {
  border-color: #d93025;
  background-color: #fce8e6;
}

input:user-invalid + .error-msg {
  display: block;
}

/* Optional: Subtle indicator for required fields that are valid */
input:required:user-valid {
  border-color: #188038;
  border-width: 2px;
}

3. Синхронизация состояния JavaScript

ОБЯЗАТЕЛЬНО. Поскольку :user-invalid – это визуальное состояние, вы ДОЛЖНЫ предоставить мост JavaScript для динамической синхронизации aria-invalid="true" для специальных возможностей, когда пользователь убирает фокус с недействительного поля или пытается отправить форму.

const form = document.getElementById('feedback-form');

const syncAriaInvalid = (input) => {
  if (!input.checkValidity()) {
    input.setAttribute('aria-invalid', 'true');
  } else {
    input.removeAttribute('aria-invalid');
  }
};

// Sync on blur when a user finishes interacting
form.addEventListener('blur', (e) => {
  if (e.target.matches('input[required]')) {
    syncAriaInvalid(e.target);
  }
}, true);

// Sync all required fields when submission is attempted
form.addEventListener('submit', () => {
  form.querySelectorAll('input[required]').forEach(syncAriaInvalid);
});

// Remove error state immediately upon correction
form.addEventListener('input', (e) => {
  if (e.target.matches('input[required]') && e.target.checkValidity()) {
    e.target.removeAttribute('aria-invalid');
  }
});

Резервные объявления и поддержка браузеров

Резервные варианты и поддержка браузеров для :user-valid и :user-invalid

Резервный ССЦ

input:user-invalid,
input.user-invalid-fallback {
  border-color: #d93025;
  background-color: #fce8e6;
}

input:user-invalid + .error-msg,
input.user-invalid-fallback + .error-msg {
  display: block;
}

Резервный код JavaScript

Используйте многоразовую утилиту, которая отслеживает состояние взаимодействия с помощью WeakMap. Это позволяет избежать загрязнения DOM "грязными" классами или атрибутами данных.

const UserInvalidFallback = (() => {
  const dirtyState = new WeakMap();

  const updateState = (input) => {
    const isValid = input.checkValidity();

    // Update both visual and ARIA state
    input.classList.toggle('user-invalid-fallback', !isValid);
    input.classList.toggle('user-valid-fallback', isValid);

    if (!isValid) {
      input.setAttribute('aria-invalid', 'true');
    } else {
      input.removeAttribute('aria-invalid');
    }
  };

  const handleEvent = (event) => {
    const input = event.target;

    if (event.type === 'reset') {
      const controls = input.elements || [];
      for (const control of controls) {
        dirtyState.delete(control);
        control.classList.remove('user-invalid-fallback');
        control.classList.remove('user-valid-fallback');
        control.removeAttribute('aria-invalid');
      }
      return;
    }

    if (!input.checkValidity) return;

    if (event.type === 'input' || event.type === 'change') {
      const state = dirtyState.get(input) || { hasInteracted: false, hasBlurred: false };
      state.hasInteracted = true;
      dirtyState.set(input, state);
      if (state.hasBlurred) {
        updateState(input);
      }
    } else if (event.type === 'blur') {
      const state = dirtyState.get(input) || { hasInteracted: false, hasBlurred: false };
      state.hasBlurred = true;
      dirtyState.set(input, state);
      if (state.hasInteracted) {
        updateState(input);
      }
    }
  };

  const init = (root = document) => {
    if (CSS.supports('selector(:user-invalid)')) return;

    root.addEventListener('blur', handleEvent, true); // Capture phase
    root.addEventListener('input', handleEvent);
    root.addEventListener('change', handleEvent);
    root.addEventListener('reset', handleEvent, true); // Capture resets
  };

  return { init };
})();

// Initialize for a specific form
const form = document.querySelector('#demo-form');
UserInvalidFallback.init(form);

О чем ещё нужно помнить

  1. Звездочки. Рекомендуется визуально обозначать обязательные поля (например, звездочкой *) в ярлыке, чтобы пользователи знали, чего ожидать, до взаимодействия.
  2. Кнопки отправки. В отличие от кнопок disabled, кнопки отправки должны быть активны. Если пользователь нажмет на нее, браузер автоматически активирует :user-invalid для всех пустых обязательных полей и выделит первое из них. Это очень удобно для пользователей.
  3. Специальные возможности. Нативный элемент :user-invalid не синхронизируется автоматически с атрибутами ARIA. Добавьте следующий код JavaScript, чтобы синхронизировать aria-invalid с визуальным состоянием:
// Sync aria-invalid with the CSS :user-invalid state
const syncAria = (el) => {
  el.setAttribute?.('aria-invalid', el.matches(':user-invalid') ? 'true' : 'false');
};

// Update on blur (to show error) and input (to clear it)
document.addEventListener('blur', (e) => syncAria(e.target), true);
document.addEventListener('input', (e) => {
  if (e.target.hasAttribute('aria-invalid')) syncAria(e.target);
});