选择菜单互动

Web 功能： :user-valid 和 :user-invalid

问题

对于必填下拉菜单（例如“选择国家/地区”），如果默认选项的值为空，标准验证会立即将该字段标记为无效。这可能会造成视觉干扰。我们希望仅在用户打开菜单后未选择任何选项就关闭菜单，或者尝试提交表单时，才显示错误。

解决方案

:user-invalid 伪类可与 <select> 元素无缝搭配使用。它会遵循用户的互动流程：仅加载页面或聚焦/失焦而不进行更改不计为互动，因此在用户主动尝试选择之前，该字段会保持中立。

实施策略

HTML 限制条件：使用 <select> 和 required。第一个选项应为 value=""，最好将其停用/隐藏，以强制用户做出有效选择。
视觉反馈：使用 :user-invalid 设置选择框边框的样式。
时机：如果用户在使控件失去焦点之前或在提交表单时更改了值（即使改回默认的无效状态），浏览器就会认为该字段“已互动”。

实现指南

1. HTML 结构

“placeholder”选项是这里的关键。

<form>
  <div class="field">
    <label for="country">Country</label>
    <select
      id="country"
      name="country"
      required
      aria-errormessage="country-error"
    >
      <option value="" disabled selected>Select a country...</option>
      <option value="us">United States</option>
      <option value="ca">Canada</option>
      <option value="uk">United Kingdom</option>
    </select>
    <div id="country-error" class="error-msg">
      Please select a country.
    </div>
  </div>
</form>

2. CSS

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

/*
  Only show error after the user visits the select menu.
*/
select:user-invalid {
  border-color: #d93025;
  background-color: #fce8e6;
}

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

select:user-valid {
  border-color: #188038;
}

回退和浏览器支持

:user-valid 和 :user-invalid 的回退方案和浏览器支持

后备 CSS

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);

其他注意事项

移动设备上的行为：在移动设备上，“blur”事件的发生方式可能会因操作系统选择器而异。建议在实际设备上进行测试。
无障碍功能：原生 :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);
});