HTML5 유효성 검사 재정의하기
HTML5에서는 required 속성 덕분에 입력 필드를 비워 둔 채 폼을 제출할 수 없습니다. 하지만 경우에 따라 이러한 기본 유효성 검사를 건너뛰어야 할 때가 있습니다. 이럴 때는 JavaScript를 사용해 버튼 클릭 시점에 해당 속성을 제거하면 됩니다.
DOM 요소에서 특정 속성을 삭제하려면 removeAttribute() 메서드를 사용합니다. 이 메서드는 일치하는 각 요소에서 지정한 속성을 제거하는 역할을 합니다.
구현 예제
<!DOCTYPE html>
<html>
<body>
<form>
First Name: <input type = "text" id = "fname" value = "Amit" required>
<input type = "radio" onclick = "display('fname')"><br>
</form>
<script>
function display(id) {
document.getElementById(id).removeAttribute('required');
}
</script>
</body>
</html>
코드 동작 방식
위 예제에서 텍스트 입력 필드에는 required 속성이 설정되어 있어, 값이 비어 있으면 폼 제출이 차단됩니다. 그러나 라디오 버튼을 클릭하면 display() 함수가 호출되고, 함수 내부의 removeAttribute('required')가 실행되면서 해당 입력 필드에서 필수 입력 조건이 제거됩니다. 그 결과 유효성 검사에 걸리지 않고 폼을 자유롭게 제출할 수 있습니다.
이처럼 removeAttribute() 메서드를 활용하면 상황에 따라 HTML5의 기본 유효성 검사를 유연하게 제어할 수 있습니다.