브라우저 기본 검증과 서버 검증의 역할을 구분합니다.
required, minlength, pattern, min, max는 제출 전에 잘못된 입력을 찾는 제약 조건입니다. checkValidity는 유효 여부를 반환하고 reportValidity는 안내 UI를 표시합니다. 브라우저 검증은 사용자 편의 기능이며 요청을 조작할 수 있으므로 서버에서도 같은 규칙을 반드시 다시 검사해야 합니다.
리스너는 맨 처음 preventDefault를 부르기 때문에 검증 결과와 상관없이 실제 요청은 나가지 않습니다. 이메일 형식이나 8자 미만 비밀번호에서 막히면 reportValidity가 첫 번째 잘못된 칸으로 초점을 옮기며 안내를 띄우고, aria-live=polite인 문단에 들어간 새 문장은 화면 읽기 도구가 하던 말을 마친 뒤 읽어 줍니다.
기본 속성으로 표현하기 어려운 조건은 setCustomValidity로 오류 문장을 직접 넣어 같은 검증 흐름에 태울 수 있습니다. 문장이 들어 있는 동안 그 칸은 invalid 상태이므로 조건을 만족하면 빈 문자열을 넣어 풀어야 합니다. CSS의 :user-invalid는 사용자가 값을 건드린 뒤에만 잘못된 칸을 표시해, 처음부터 빨간 칸이 보이는 문제를 줄입니다.
novalidate를 사용하면 브라우저의 자동 제출 차단이 꺼집니다. 직접 checkValidity/reportValidity를 호출하거나 완전한 사용자 정의 검증을 제공해야 합니다.
직접 바꿔보세요이메일 형식과 비밀번호 길이를 각각 틀리게 입력해 어떤 제약이 실패하는지 확인하세요.