formNoValidate 속성이란?
HTML DOM의 Input Submit formNoValidate 속성은 제출(submit) 버튼의 formNoValidate 속성값을 설정하거나 반환하는 데 사용됩니다. 이 속성은 폼 데이터가 서버로 전송될 때 유효성 검사(validation)를 수행할지 여부를 지정하며, <form> 요소에 설정된 novalidate 속성보다 우선적으로 적용된다는 점이 특징입니다.
formNoValidate 속성은 HTML5에서 도입되었으며, type 속성값이 "submit"으로 지정된 input 요소에서만 사용할 수 있습니다.
문법(Syntax)
formNoValidate 속성을 설정하는 기본 문법은 다음과 같습니다.
submitObject.formNoValidate = true|false
각 값의 의미는 다음과 같습니다.
- true: 폼 데이터를 서버로 제출할 때 유효성 검사를 수행하지 않습니다.
- false: 폼 데이터를 제출할 때 반드시 유효성 검사를 수행합니다.
기본값은 false이며, 별도로 설정하지 않으면 폼 제출 시 유효성 검사가 실행됩니다.
예제 코드
다음 예제는 Input Submit formNoValidate 속성을 실제로 활용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<body>
<h1>Submit formNoValidate property</h1>
<form id="FORM_1" action="/Sample.php" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Loc"> <br><br>
<input type="submit" id="SUBMIT1" formnovalidate=false>
</form>
<p>아래 버튼을 클릭하면 폼 데이터가 제출 시 유효성 검사를 거치게 됩니다.</p>
<button onclick="formValidate()">VALIDATE</button>
<p id="Sample"></p>
<script>
function formValidate() {
document.getElementById("SUBMIT1").formNoValidate=false;
document.getElementById("Sample").innerHTML = "formNoValidate 값이 false로 설정되어, 이제 폼 데이터는 제출 시 유효성 검사를 거칩니다.";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
화면의 VALIDATE 버튼을 클릭하면 JavaScript 함수가 실행되어 제출 버튼의 formNoValidate 값이 false로 변경되고, 결과 메시지가 표시됩니다.
정리
formNoValidate 속성은 특정 상황에서 폼 유효성 검사를 건너뛰거나, 반대로 검사를 강제로 활성화해야 할 때 유용하게 사용됩니다. <form> 요소의 novalidate 속성을 덮어쓸 수 있으므로, 버튼 단위로 세밀한 유효성 검사 제어가 필요한 경우 활용해 보시기 바랍니다.