required 속성이 있는 HTML5 입력 요소의 유효성 검사를 건너뛰는 방법

HTML5에서는 required 속성이 설정된 입력 요소가 있어도, 특정 제출 버튼만 유효성 검사를 건너뛰고 싶은 경우가 있습니다. 이럴 때 formnovalidate 속성을 사용하면 됩니다.

formnovalidate 속성은 <input type="submit"> 또는 <button type="submit"> 요소에 추가할 수 있으며, 해당 버튼을 클릭해 폼을 제출할 때 브라우저의 기본 유효성 검사(required, pattern, type 등)를 모두 무시합니다.

기본 사용 예제

아래 예제에서는 첫 번째 제출 버튼은 정상적으로 유효성 검사를 수행하지만, 두 번째 버튼에는 formnovalidate 속성이 적용되어 유효성 검사 없이 폼이 제출됩니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML formnovalidate 속성</title>
   </head>
   <body>
      <form action = "new.php" method = "get">
         Rank <input type = "number" name = "rank" required><br>
         <input type = "submit" value = "Submit"><br>
         <input type = "submit" formnovalidate = "formnovalidate" value = "Submit with no validation">
      </form>
   </body>
</html>

동작 방식 설명

첫 번째 Submit 버튼: rank 입력값이 비어 있으면 브라우저가 "이 필드는 필수입니다"라는 오류 메시지를 표시하고 제출을 막습니다.
두 번째 Submit with no validation 버튼: formnovalidate 속성 때문에 rank 값이 비어 있어도 유효성 검사 없이 그대로 new.php로 데이터가 전송됩니다.

폼 전체에 적용하는 novalidate 속성

특정 버튼이 아니라 폼 자체의 모든 유효성 검사를 비활성화하려면 <form> 태그에 novalidate 속성을 사용하면 됩니다.

<form action = "new.php" method = "get" novalidate>
   Rank <input type = "number" name = "rank" required>
   <input type = "submit" value = "Submit">
</form>

두 속성의 차이를 정리하면 다음과 같습니다.

속성	적용 대상	효과
formnovalidate	개별 제출 버튼	해당 버튼으로 제출할 때만 유효성 검사 생략
novalidate	form 요소 전체	모든 제출 경로에서 유효성 검사 생략

이처럼 formnovalidate 속성을 활용하면 '임시 저장'이나 '초안 제출'처럼 필수 항목 확인 없이 데이터를 전송해야 하는 상황에서 유용하게 활용할 수 있습니다.