상호작용 후 입력 검증

웹 기능: :user-valid 및 :user-invalid

문제

사용자가 필드에 포커스를 맞추고 입력을 시작하는 순간 유효성 검사 오류를 표시하는 것은 시기상조이며 주의를 산만하게 합니다. 예를 들어 사용자가 이메일 주소 (예: 'user@gm') 또는 복잡한 요구사항이 있는 비밀번호를 입력하는 경우 입력이 완료될 때까지 필드가 기술적으로 유효하지 않습니다. 표준 :invalid 스타일 지정은 오류 상태가 즉시 표시되어 사용자를 당황하게 합니다.

해결 방법

:user-invalid 가상 클래스를 사용하면 사용자가 필드를 흐리게 처리하여 값을 '커밋'하거나 양식을 제출하려고 할 때까지 오류 상태를 지연할 수 있습니다. 이렇게 하면 사용자가 필드와의 상호작용을 완료한 후에만 유효성 검사 피드백이 제공됩니다.

구현 전략

  1. HTML 제약 조건: type="email", pattern, required와 같은 표준 HTML5 속성을 사용하여 브라우저의 기본 제공 유효성 검사 로직을 트리거합니다.
  2. 시각적 피드백: 상호작용 후에만 :user-invalid를 사용하여 오류 스타일을 적용합니다.
  3. 긍정적 강화: 요구사항이 충족되면 :user-valid를 사용하여 녹색 '성공' 표시기를 표시할 수 있습니다(선택사항).
  4. 원활한 복구: 사용자가 입력을 올바른 형식으로 수정하는 즉시 :user-invalid가 일치를 중지하여 오류 상태를 즉시 제거합니다.

구현 가이드

사용 사례 1: 이메일 검증

필수: 이메일 입력란에 표준 HTML5 속성을 사용합니다. 오류 메시지는 기본적으로 숨겨져 있으며, 브라우저에서 사용자가 잘못된 상태로 필드를 벗어났다고 판단하는 경우에만 표시됩니다.

<form>
  <div class="field">
    <label for="email">Email Address</label>
    <!-- MANDATORY: Place format hints above the input so autocomplete popovers don't cover them during editing -->
    <span id="email-hint" class="hint">Format: you@example.com</span>
    <!-- DO: Use standard HTML validation attributes like type="email" and required -->
    <input
      type="email"
      id="email"
      name="email"
      required
      autocomplete="email"
      aria-describedby="email-hint"
      aria-errormessage="email-error"
    >
    <div id="email-error" class="error-msg">
      <span aria-hidden="true">❌</span> Please enter a valid email address.
    </div>
  </div>
</form>

.hint {
  display: block;
  color: #5f6368;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

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

/*
  DO: Only show error styles after user interaction.
  Use multiple indicators (border/background shift + icon/text) to avoid color-only states.
*/
input:user-invalid {
  border-color: #d93025;
  background-color: #fce8e6;
}

/* DO: Reveal the error message using the adjacent sibling selector */
input:user-invalid + .error-msg {
  display: block;
}

/* DO: Provide a clear success indication on :user-valid */
input:user-valid {
  border-color: #188038;
}

사용 사례 2: 비밀번호 복잡성

필수: pattern 속성에서 정규식 Lookahead 패턴을 사용하여 복잡성 규칙을 정의합니다. 규칙 목록은 사용자에게 안내하기 위해 입력란 위에 표시되며 오류가 있는 경우 강조 표시됩니다.

<form>
  <div class="field">
    <label for="password">New Password</label>
    <!-- MANDATORY: Place hints and rules above the input so mobile keyboards do not obscure them -->
    <ul id="password-rules" class="rules-list">
      <li>At least 8 characters</li>
      <li>One uppercase letter</li>
      <li>One number</li>
      <li>One special character</li>
    </ul>
    <!-- DO: Use pattern and minlength for complex password validation
         DO: Match all constraints with lookaheads via pattern attribute
     -->
    <input
      type="password"
      id="password"
      autocomplete="new-password"
      required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}"
      minlength="8"
      aria-describedby="password-rules"
    >
  </div>
</form>

/* DO: State the default styling as neutral */
.rules-list { 
  color: #5f6368; 
  margin-bottom: 0.5rem;
}

/* DO: Show invalid state (After interaction): Error */
input:user-invalid {
  border-color: #d93025;
  background-color: #fce8e6;
}

/* DO: Highlight rules list when error is shown using the modern :has() selector */
.field:has(input:user-invalid) .rules-list {
  color: #d93025;
  font-weight: 600;
}

/* DO: Add success indications for :user-valid state */
input:user-valid {
  border-color: #188038;
}

/* DO: Hide rules once satisfied */
.field:has(input:user-valid) .rules-list {
  display: none;
}

대체 및 브라우저 지원

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

기타 고려사항

  1. 접근성:
    • 필수: aria-describedby를 사용하여 규칙 목록을 입력에 연결합니다.
    • 금지사항: 입력이 유효할 때까지 규칙 목록을 완전히 숨기지 마세요. 사용자는 무엇을 입력해야 하는지 알아야 합니다.
  2. 패턴 속성 제한: 필수: pattern 속성은 전체 일치 (암시적 ^...$)를 수행합니다. 비밀번호 정규식이 전체 문자열을 고려하는지 확인하세요.
  3. 검증 엄격성: 브라우저의 기본 type="email" 검증은 상당히 관대합니다 (예: user@localserver가 통과할 수 있음). 더 엄격한 유효성 검사가 필요한 경우 더 강력한 유효성 검사 라이브러리나 type="email"와 함께 맞춤 유효성 검사 함수를 사용해야 할 수 있습니다.
  4. 포커스 관리: 필수: 사용자가 잘못된 필드가 있는 양식을 제출하면 브라우저가 자동으로 첫 번째 잘못된 필드에 포커스를 맞춥니다. 제출 시도가 상호작용으로 간주되므로 :user-invalid 스타일이 즉시 적용됩니다.
  5. 일관된 ARIA 환경: 네이티브 :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);
});