# HTML 폼 검증의 활용 부족

> Clean Markdown view of GeekNews topic #17483. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17483](https://news.hada.io/topic?id=17483)
- GeekNews Markdown: [https://news.hada.io/topic/17483.md](https://news.hada.io/topic/17483.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-10-29T22:33:30+09:00
- Updated: 2024-10-29T22:33:30+09:00
- Original source: [expressionstatement.com](https://expressionstatement.com/html-form-validation-is-heavily-underused)
- Points: 2
- Comments: 1

## Topic Body

#### 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 폼 검증을 더 잘 활용할 수 있도록 돕는 유용한 정보를 제공함.

## Comments



### Comment 30542

- Author: neo
- Created: 2024-10-29T22:33:31+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=41976529) 
- 웹 브라우저는 여전히 내장된 HTML 유효성 검사 메시지의 스타일을 변경할 수 없으며, Chrome과 Firefox는 OS 플랫폼 UI 지침을 따르지 않아 프로젝트의 미적 감각과 충돌함
  - Chrome은 이전에 벤더 접두사 가상 요소 선택자를 사용하여 유효성 검사 메시지의 스타일을 변경할 수 있었으나, 이 기능이 제거되었음
  - HTML 콤보박스와 `<select multiple>`의 비효율적인 사용에 대한 불만이 있음

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

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

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

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

- React를 사용하지 않는 간단한 예제 제공
  - [HTMLObjectElement.setCustomValidity](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity)

- HTML 폼 유효성 검사는 훌륭하지만 Firefox for Android에서는 작동하지 않는 큰 문제가 있음
  - [관련 버그](https://bugzilla.mozilla.org/show_bug.cgi?id=1510450)

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

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

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