HTML의 novalidate 속성은 폼(form)이 제출될 때 브라우저가 기본적으로 수행하는 유효성 검사(validation)를 실행하지 않도록 지정하는 데 사용됩니다. 이 속성은 값을 별도로 지정하지 않는 불리언(Boolean) 속성으로, <form> 태그에 단순히 novalidate만 추가하면 활성화됩니다.
일반적으로 HTML5에서는 type="email", type="number", required 등의 입력 필드에 대해 브라우저가 자동으로 유효성 검사를 수행하고, 조건에 맞지 않는 값이 입력되면 오류 메시지를 표시합니다. 하지만 novalidate 속성을 사용하면 이러한 브라우저 차원의 검증이 생략되어, 잘못된 형식의 데이터라도 서버로 그대로 전송할 수 있습니다.
novalidate 속성 예제
아래 코드를 직접 실행해 보면 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>
Rank<br><input type="number" name="rank"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>novalidate 속성 활용 시 주의 사항
novalidate 속성은 브라우저의 유효성 검사만 비활성화할 뿐, 서버 측 검증까지 대체하지는 않습니다. 따라서 실무에서는 다음과 같은 경우에 유용하게 활용할 수 있습니다.
- 자바스크립트 등으로 커스텀 유효성 검사를 직접 구현하고 싶은 경우
- 개발·테스트 과정에서 브라우저 검증 없이 다양한 입력값을 테스트해야 하는 경우
- 검증 로직을 서버 측에서 일괄 처리하는 설계인 경우
반대로, 사용자 입력값의 신뢰성이 중요한 서비스라면 클라이언트 측 기본 검증을 유지하는 것이 좋으며, 보안을 위해 반드시 서버 측 검증을 함께 적용해야 합니다.