▲

GN⁺: HTML 폼 검증의 활용 부족

 (expressionstatement.com)
2P by neo 16일전 | favorite | 댓글 1개

HTML 폼 검증의 저조한 활용

  • HTML 폼은 강력한 검증 메커니즘을 가지고 있지만, 많이 사용되지 않음. 많은 사람들이 이에 대해 잘 알지 못함. 이는 설계상의 결함 때문일 수 있음.

속성, 메서드, 그리고 프로퍼티

  • 빈 입력을 방지하기 위해 required 속성을 추가할 수 있음.
  • 입력에 제약을 추가하는 방법은 세 가지가 있음:
    • 특정 type 속성 값 사용: "email", "number", "url"
    • "pattern" 또는 "maxlength" 같은 다른 입력 속성 사용
    • setCustomValidity DOM 메서드 사용: 임의의 검증 로직을 생성하고 복잡한 경우를 처리할 수 있는 가장 강력한 방법임.

명령형 API의 미묘함

  • setCustomValidity API는 메서드로만 제공되어 사용하기 불편함.
  • 예를 들어, 입력이 비어 있을 때 폼 제출을 막기 위해 required 속성과 같은 기능을 구현할 수 있음.
  • 초기 렌더링 시 입력이 비어 있으면 유효하지 않도록 설정해야 함.

보일러플레이트 문제

  • 초기 값을 검증하는 방식이 번거로움.
  • 검증 로직이 onChange 핸들러와 초기 렌더링 단계에서 중복됨.
  • useRef + useLayoutEffect + onChange 조합은 복잡함.

누락된 부분

  • custom-validity 속성이 필요함.
  • 선언적 프레임워크에서 입력 검증을 강력하게 정의할 수 있음.

비동기 검증의 힘

  • 사용자 이름 입력이 사용되지 않은 경우에만 유효해야 하는 경우를 처리할 수 있음.
  • 서버에 비동기 호출이 필요하며, 중간 상태가 필요함.

구현

  • verifyUsername 함수를 사용하여 사용자 이름의 고유성을 확인함.
  • useQuery를 사용하여 서버 요청 상태를 관리함.
  • customValidity 속성을 사용하여 비동기 검증 흐름을 설명함.

비밀번호 확인 폼

  • 입력된 비밀번호를 반복 입력해야 하는 폼을 구현함.
  • 두 입력 필드가 일치하는지 확인하여 검증함.

결론

  • setCustomValidity는 다양한 검증 요구를 충족할 수 있음.
  • 강력한 API가 진정한 힘을 제공함.
  • HTML 스펙에 이 기능이 추가되기를 기대함.

GN⁺의 정리

  • HTML 폼 검증은 강력하지만 잘 활용되지 않음. 이는 API의 복잡성 때문일 수 있음.
  • setCustomValidity 메서드는 복잡한 검증 로직을 처리할 수 있는 강력한 도구임.
  • 비동기 검증과 같은 복잡한 시나리오를 처리할 수 있는 방법을 제시함.
  • 이 글은 개발자들이 HTML 폼 검증을 더 잘 활용할 수 있도록 돕는 유용한 정보를 제공함.
▲
neo 16일전  [-]
Hacker News 의견

  • 웹 브라우저는 여전히 내장된 HTML 유효성 검사 메시지의 스타일을 변경할 수 없으며, Chrome과 Firefox는 OS 플랫폼 UI 지침을 따르지 않아 프로젝트의 미적 감각과 충돌함

    • Chrome은 이전에 벤더 접두사 가상 요소 선택자를 사용하여 유효성 검사 메시지의 스타일을 변경할 수 있었으나, 이 기능이 제거되었음
    • HTML 콤보박스와 <select multiple>의 비효율적인 사용에 대한 불만이 있음

  • 특정 type 속성 값(예: "email", "number", "url")을 사용하면 모바일에서 최적의 키보드를 트리거하여 사용자 경험을 크게 향상시킬 수 있음

  • 사양을 작성하는 사람들이 실제 사용과 동떨어져 있으며, 간단한 것에는 적합하지만 복잡한 폼에서는 직접 작성하는 것이 더 나음

  • 폼의 기본적인 단순성을 간과했던 경험을 후회하며, 다른 사람의 관점을 공유해줘서 감사함

  • 체크박스에 레이블이 있을 때, 레이블에 "for" 속성을 추가하여 레이블을 클릭해 체크박스를 활성화/비활성화할 수 있도록 해달라는 요청이 있음

  • React를 사용하지 않는 간단한 예제 제공

  • HTML 폼 유효성 검사는 훌륭하지만 Firefox for Android에서는 작동하지 않는 큰 문제가 있음

  • 많은 프레임워크와 라이브러리가 스타일 가능한 유효성 검사 기능을 제공하므로, 굳이 고생할 필요가 없음

  • 유효성 검사를 과도하게 사용하지 않도록 주의해야 함

    • Groupon 환불 시 "최소 15단어" 조건 때문에 HTML을 검사해야 했던 경험이 있음
    • 유효성 검사 패턴이 구두점을 전혀 허용하지 않음

  • 2FA 입력에 type=password를 잘못 사용하는 사이트는 비밀번호 관리자와 브라우저를 혼란스럽게 함

답변달기