글

라벨이 minlength required인 게시물 표시

AI가 만든 폼의 minlength: 최소3글자여도 빈칸이 통과하는 이유

이미지
AI가 만든 텍스트 입력칸에 minlength="3"이 있어도 빈칸을 반드시 막는 것은 아닙니다. 최소 길이 조건과 필수 입력 조건은 다르기 때문입니다. 필수로 받을 정보라면 required도 확인하고, 빈칸·짧은 값·충족한 값을 실제로 입력해 각각 검수하세요. 목차 1. 최소 길이와 필수 여부를 나누기 2. 목적을 정한 뒤 required 추가 3. 실제 입력으로 검수 기록 남기기 4. 자주 묻는 질문 1. 최소 길이와 필수 여부를 나누기 MDN은 minlength가 required를 뜻하지 않으며, 필수가 아닌 입력칸은 빈 문자열인 상태로 제출할 수 있다고 설명합니다. 입력한 값의 길이 조건과 아예 값을 넣어야 하는 조건을 같은 것으로 읽지 마세요. 여기서는 일반 text 입력칸의 브라우저 기본 검증을 예로 듭니다. 길이는 UTF-16 코드 단위로 계산하므로 이모지 등이 포함되면 눈에 보이는 글자 수와 다를 수 있습니다. 아래 표는 이 차이가 생기지 않는 영문 ab·abc 예시로 비교합니다. <label for="nickname">별명</label> <input id="nickname" name="nickname" type="text" minlength="3"> 같은 입력칸에서 검수 minlength="3"만 있을 때 required도 있을 때 빈칸 필수 조건이 아니므로 빈 값 허용 필수 값 누락 확인 직접 입력한 ab 최소 길이 미달 확인 최소 길이 미달 확인 직접 입력한 abc 길이 조건 충족 이 두 조건 충족 MDN minlength의 빈 값 조건 확인 2. 목적을 정한 뒤 required 추가 정말 필수로 받아야 하는 값인지 먼저 정하세요. 모든 칸을 필수로 바꾸는 것이 검수의 목적은 아닙니다. 필수 항목에는 사용자에게 보이는 안내와 적절한 이름표도 필요합니다. 화면에 별표를 붙였다는 사실과 H...