HTML 폼 제출 시 자바스크립트 함수를 호출하는 방법 (onsubmit 이벤트 활용법)

onsubmit 이벤트란?

사용자가 폼(form)을 제출하려고 할 때 onsubmit 이벤트가 발생합니다. 이 이벤트를 활용하면 폼 데이터가 웹 서버로 전송되기 전에 유효성 검사(validation)를 수행할 수 있습니다. 예를 들어, 필수 입력 항목이 비어 있는지, 이메일 형식이 올바른지 등을 미리 확인할 수 있죠.

아래 예제는 폼 데이터를 웹 서버에 제출하기 전에 validate() 함수를 호출하는 방법을 보여줍니다.

1. 자바스크립트 검증 함수 작성

먼저 폼의 유효성을 검사하는 함수를 정의합니다. 이 함수는 검사 결과에 따라 true 또는 false를 반환해야 합니다.

<script>
   <!--
      function validate() {
         // 모든 유효성 검사 로직이 여기에 작성됩니다
         // .........

         // 검사 통과 시 true, 실패 시 false를 반환
         return true; // 또는 return false;
      }
   //-->
</script>

2. HTML 폼에서 onsubmit 속성으로 함수 연결

다음으로 HTML 폼 태그에 onsubmit 속성을 추가하고, 앞서 만든 함수를 연결합니다. 이때 return 키워드를 반드시 함께 사용해야 합니다.

<form method="POST" action="new.cgi" onsubmit="return validate()">
   ...
   <input type="submit" value="Submit" />
</form>

동작 원리

여기서 핵심은 반환 값의 처리 방식입니다.

validate() 함수가 true를 반환하면 → 폼이 정상적으로 제출되어 데이터가 서버로 전송됩니다.
validate() 함수가 false를 반환하면 → 폼 제출이 취소되며, 데이터는 전송되지 않습니다.

만약 return 키워드 없이 onsubmit="validate()"처럼 작성하면 함수의 반환 값과 관계없이 폼이 항상 제출되므로 주의해야 합니다.

참고: addEventListener를 사용한 현대적인 방식

인라인 방식(onsubmit 속성) 외에도, 자바스크립트에서 직접 이벤트 리스너를 등록하는 방법이 더 권장됩니다. HTML과 스크립트를 분리할 수 있어 코드 유지보수에 유리합니다.

<script>
   document.getElementById("myForm").addEventListener("submit", function(event) {
      if (!validate()) {
         event.preventDefault(); // 폼 제출 중단
      }
   });
</script>

두 방식 모두 동일한 결과를 제공하지만, 최신 개발 환경에서는 addEventListener 방식을 사용하는 것이 일반적입니다.