HTML5에서 제공하는 클라이언트 측 유효성 검사 오류 메시지(버블)를 화면에 표시하려면 required 속성을 사용하면 됩니다.
required 속성이란?
텍스트 상자가 비어 있는 상태로 제출되는 것을 막는 것과 같은 기본적인 클라이언트 측 유효성 검사에는 더 이상 JavaScript가 필요하지 않습니다. HTML5는 required라는 새로운 속성을 도입했는데, 이 속성을 입력 요소에 추가하면 해당 필드에 값이 반드시 입력되어야 한다는 것을 브라우저가 자동으로 강제하게 됩니다.
즉, 사용자가 값을 입력하지 않은 채 제출 버튼을 누르면 브라우저가 자체적으로 오류 메시지를 표시하며 폼 전송을 차단하므로, 별도의 스크립트 작성 없이도 간편하게 유효성 검사를 구현할 수 있습니다.
사용 예제
다음은 required 속성을 실제로 적용한 예제입니다. 아래 코드에서 이메일 입력란을 비워 둔 채 Submit 버튼으로 폼을 제출해 보면, 브라우저가 값 입력을 요구하는 오류 버블을 표시하는 것을 확인할 수 있습니다.
<!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>