reportValidity 및 setCustomValidity

제약 조건 검증 API는 브라우저의 내장 검증 UI를 제어하는 두 가지 메서드를 제공합니다. reportValidity는 툴팁을 표시하고, setCustomValidity는 사용자 지정 오류 메시지를 제공합니다. 두 메서드를 함께 사용하면 기본 표시 방식은 유지하면서 메시지를 사용자 지정할 수 있습니다.

checkValidity()는 UI에 영향을 주지 않고 true/false를 조용히 반환합니다. reportValidity()도 같은 검사를 수행하지만, 처음 발견한 유효하지 않은 필드에 포커스를 두고 브라우저의 검증 툴팁을 추가로 표시합니다. 별도의 작업 없이 기본 사용자 경험을 사용하려면 reportValidity를 선택합니다.

여러 단계로 구성된 입력 과정에서는 다음 단계로 넘어가기 전에 현재 단계의 필드를 검증합니다: if (step.reportValidity()) { next(); }. 브라우저가 오류 표시를 처리하고 사용자는 주의가 필요한 필드에 포커스를 받으므로, 포커스 관리를 다시 구현하지 않아도 됩니다.

기본 메시지("이 필드를 작성해 주세요")가 원하는 어조와 맞지 않을 수 있습니다. input.setCustomValidity("Username is required")를 사용하면 기본 메시지가 작성한 텍스트로 바뀝니다. 메시지를 지울 때까지 입력 요소는 유효하지 않은 것으로 처리됩니다.

input.setCustomValidity("")는 사용자 지정 메시지를 제거하고 일반 검증을 다시 활성화합니다. 다시 검증할 때마다 이 코드를 호출해야 합니다. 그렇지 않으면 사용자가 문제를 해결한 후에도 이전 사용자 지정 메시지가 남아 있습니다.

서버 측 확인(사용자 이름의 중복 여부나 쿠폰의 유효성 등)에는 비동기 응답을 받은 후 setCustomValidity를 사용합니다: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. 브라우저는 변경된 유효성 상태를 즉시 반영합니다.

유효성 추적은 유지하면서 직접 만든 오류 표시를 사용하려면 invalid 이벤트를 수신하고 e.preventDefault()를 호출하여 기본 툴팁을 억제합니다: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).

setCustomValidity는 한 번에 하나의 사용자 지정 메시지만 지원합니다. 여러 규칙을 적용하려면 각 규칙을 확인한 뒤, 우선순위에 따라 가장 적절한 메시지를 setCustomValidity로 설정합니다. 처음 실패한 규칙의 메시지가 표시됩니다.

필수 입력 필드가 비어 있을 때 사용자 지정 메시지를 설정하면 사용자 지정 메시지와 기본 메시지가 서로 충돌할 수 있습니다. 필드마다 한 가지 방식만 선택하세요. 내장 제약 조건을 비활성화하고(type="email" 대신 type="text"를 사용한 뒤 setCustomValidity로 검증) 직접 처리하거나, 내장 검증에 전적으로 맡기면 됩니다.

비밀번호 확인처럼 여러 필드의 값을 함께 검증하려면 관련 필드에 setCustomValidity를 적용합니다: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). 두 값이 일치할 때까지 폼은 유효하지 않은 상태입니다.

내장 메시지는 사용자의 언어를 기준으로 브라우저가 현지화합니다. setCustomValidity로 설정하는 사용자 지정 메시지는 직접 올바른 언어로 작성해야 합니다. navigator.language 또는 자체 국제화 상태를 읽고 일치하는 번역을 제공하세요.

DevTools를 열고 가능한 모든 잘못된 경로를 시도하세요. 빈 상태로 제출하기, 일부만 입력하기, 형식 불일치, 비동기 실패를 확인합니다. 올바른 메시지가 표시되는지, 문제를 해결하면 메시지가 사라지는지, 유효한 폼을 제출하면 다음 단계로 진행되는지 검증하세요. 잘못된 형식의 값을 붙여 넣는 경우나 브라우저 자동 완성 같은 예외 상황도 별도의 테스트가 필요합니다.

input.setCustomValidity("이미 사용 중")을 호출한 후 브라우저에 입력 요소가 다시 유효하다고 알리려면 어떻게 해야 하나요?

reportValidity는 브라우저의 내장 검증 UI(포커스와 툴팁)를 표시하므로 프로그래밍 방식의 검사에 적합합니다. setCustomValidity는 기본 메시지를 작성한 텍스트로 재정의하며, 다시 유효해지면 빈 문자열로 지웁니다. 완전히 사용자 지정한 오류 표시가 필요하면 preventDefault와 함께 invalid 이벤트를 수신합니다. 필드 간 검증, 비동기 확인, 현지화된 사용자 지정 메시지에 활용할 수 있습니다.