오류를 설명하는 가입 폼 만들기

이번 단계에서 배울 내용

좋은 폼 검증은 단순히 제출을 막는 데서 끝나지 않습니다. 어떤 필드가 왜 잘못되었는지 설명하고, 사용자가 오류를 수정하면 안내도 갱신해야 합니다.

먼저 예시를 살펴보세요

아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다.

<input id="email" type="email" required aria-describedby="email-error">
<p id="email-error" aria-live="polite"></p>

해야 할 일

이름과 이메일을 검사해 필드별 오류를 표시하고 유효할 때만 가입 완료 메시지를 보여 주세요.

완성 조건

• 빈 이름과 잘못된 이메일에 각각 명확한 오류를 표시합니다.
• 오류가 있는 입력은 aria-invalid=true가 됩니다.
• 모든 값이 유효하면 가입 완료 메시지가 표시됩니다.

작업 방법

1. 에디터에서 script.js을 엽니다.
2. TODO 주석 주변의 코드를 한 단계씩 수정합니다.
3. 미리보기에서 화면과 동작을 직접 확인합니다.
4. 완성 조건을 다시 읽고 제출합니다.

별도의 입력값은 없습니다.

에디터에 준비된 파일을 수정하고 브라우저 미리보기에서 결과를 확인하세요.

별도의 출력값은 없습니다.

페이지가 정상적으로 열리고 문제의 완성 조건과 동작을 모두 만족하면 됩니다.

도움말: 브라우저의 입력 타입과 required 속성을 활용한 뒤 필요한 메시지를 보완하세요.