HTML의 novalidate 속성은 폼(form)을 제출할 때 브라우저가 기본적으로 수행하는 유효성 검사를 생략하도록 지정하는 속성입니다. 불리언(Boolean) 속성으로, 별도의 값을 지정하지 않고 작성하기만 하면 활성화됩니다.
novalidate 속성이 필요한 이유
novalidate 속성은 사용자가 폼 작성 내용을 중간에 저장해야 할 때 특히 유용합니다. 유효성 검사가 비활성화되면 모든 입력값이 올바르지 않아도 폼을 저장할 수 있고, 나중에 이어서 작성한 뒤 제출할 수 있습니다. 다시 작업을 이어갈 때 기존 입력값 전체를 먼저 검증할 필요 없이 편리하게 진행할 수 있습니다.
예를 들어 길다면 신청서나 설문조사 폼에서 사용자가 일부 항목만 채운 상태로 임시 저장을 원하는 경우, novalidate 속성이 없으면 필수 항목 검증 오류 때문에 저장 자체가 막힐 수 있습니다. 이럴 때 novalidate를 사용하면 검증 없이 데이터를 서버로 전송해 보관할 수 있습니다.
novalidate 속성 사용 예제
다음 코드를 실행하면 HTML에서 novalidate 속성을 어떻게 사용하는지 직접 확인할 수 있습니다. 아래 예제에서 <input type="number"> 필드에 숫자가 아닌 텍스트를 입력해도 오류 메시지가 표시되지 않습니다.
<!DOCTYPE html> <html> <head> <title>HTML novalidate attribute</title> </head> <body> <form action = "" method = "get" novalidate> Student Name<br><input type="name" name="sname"><br> Total Marks<br><input type="number" name="mark"><br> <input type="submit" value="Submit"> </form> </body> </html>
주요 특징 정리
- 적용 대상:
<form>요소에만 사용할 수 있습니다. - 동작 방식: 브라우저의 기본 HTML5 유효성 검사(required, pattern, type 등)를 모두 건너뜁니다.
- 대안: 개별 입력 요소에만 검사를 생략하고 싶다면
formnovalidate속성을 제출 버튼에 사용할 수 있습니다.
단, novalidate를 사용하면 클라이언트 측 검증이 사라지므로, 서버 측에서 반드시 별도의 유효성 검사를 수행해 잘못된 데이터가 저장되지 않도록 해야 합니다.