onsubmit 이벤트는 사용자가 폼(form)을 제출하려고 시도하는 순간 발생하는 이벤트입니다. 이 이벤트를 활용하면 데이터가 서버로 전송되기 전에 입력값의 유효성을 검사할 수 있어, 잘못된 데이터가 웹 서버로 넘어가는 것을 사전에 차단할 수 있습니다.
onsubmit 이벤트의 동작 원리
onsubmit 이벤트 핸들러에서 검증 함수가 true를 반환하면 폼이 정상적으로 제출되고, false를 반환하면 제출이 취소됩니다. 즉, 서버로 데이터를 보내기 전 마지막 관문 역할을 하는 것이 바로 이 이벤트입니다.
아래 예제는 폼 데이터를 웹 서버에 제출하기 전에 validate() 함수를 먼저 호출하는 방식을 보여줍니다.
예제 코드
다음 코드는 onsubmit 이벤트의 기본적인 사용법을 나타낸 예시입니다.
<html>
<head>
<script>
<!--
function validate() {
// 모든 유효성 검사 로직이 여기에 들어갑니다
// ..........
// 검사 결과에 따라 true 또는 false를 반환합니다
}
//-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
코드 설명
onsubmit = "return validate()": 폼이 제출될 때 validate() 함수가 실행되며, 그 반환값에 따라 제출 여부가 결정됩니다.return true: 유효성 검사를 통과했으므로 폼 데이터가 action 속성에 지정된 주소로 전송됩니다.return false: 검사에 실패했으므로 데이터가 전송되지 않고 사용자에게 오류를 안내할 수 있습니다.
모던 JavaScript 방식: addEventListener 활용
HTML 태그에 직접 이벤트를 작성하는 인라인 방식 대신, 최근에는 addEventListener를 사용하는 방식이 권장됩니다.
document.getElementById("myForm").addEventListener("submit", function(event) {
if (!validate()) {
event.preventDefault(); // 폼 제출을 취소합니다
}
});
이처럼 event.preventDefault() 메서드를 호출하면 기본 제출 동작을 막을 수 있어, HTML과 JavaScript 코드를 분리한 더 깔끔하고 유지보수하기 좋은 구조를 만들 수 있습니다.
정리
onsubmit 이벤트는 폼 제출 시점에 유효성 검사를 수행할 수 있는 핵심 이벤트입니다. 필수 입력값 확인, 이메일 형식 검증, 비밀번호 일치 여부 확인 등 다양한 클라이언트 측 검증 로직을 구현할 때 반드시 알아두어야 할 개념입니다.