required 속성으로 유효성 검사 오류 말풍선 표시하기
HTML5에서 클라이언트 측 유효성 검사 오류 말풍선(버블)을 표시하려면 required 속성을 사용하면 됩니다.
클라이언트 측 유효성 검사에는 더 이상 자바스크립트가 필요하지 않습니다. HTML5에서 새롭게 도입된 required 속성을 사용하면, 빈 입력 필드가 서버로 전송되지 않도록 브라우저가 자동으로 차단해 줍니다. 즉, 사용자가 값을 입력하지 않고 제출 버튼을 누르면 브라우저가 해당 필드에 반드시 값을 입력해야 한다는 안내 메시지를 거품 형태로 표시합니다.
예제 코드
아래 예제는 required 속성이 적용된 간단한 폼입니다.
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
이메일 입력 : <input type = "text" name = "newinput" required/>
<p>Submit 버튼으로 제출을 시도해 보세요</p>
<input type = "submit" value = "submit" />
</form>
</body>
</html>동작 원리
폼이 제출될 때 브라우저는 required 속성이 지정된 모든 입력 필드의 값을 확인합니다. 값이 비어 있으면 폼 전송이 중단되고, 해당 입력 필드 근처에 "이 필드는 필수 항목입니다."와 같은 오류 말풍선이 나타납니다. 이 검증은 브라우저 자체적으로 처리되므로 별도의 자바스크립트 코드를 작성할 필요가 없습니다.
참고로, 오류 말풍선의 기본 문구는 브라우저마다 다를 수 있으며, CSS의 :invalid, :valid 같은 의사 클래스를 활용하면 유효성 검사 상태에 따라 입력 필드의 스타일을 직접 꾸밀 수도 있습니다.