JavaScript onsubmit 이벤트로 폼 제출 시 함수 호출하는 방법

onsubmit 이벤트란?

onsubmit 이벤트는 사용자가 폼(form)을 제출하려고 시도하는 순간 발생합니다. 이 이벤트를 활용하면 폼 데이터를 웹 서버로 전송하기 전에 유효성 검사(validation)를 수행할 수 있어, 잘못된 데이터가 서버로 넘어가는 것을 사전에 차단할 수 있습니다.

다음 예제는 onsubmit 이벤트의 기본적인 사용 방법을 보여줍니다. 폼 데이터를 웹 서버에 전송하기 전에 validate() 함수를 호출하며, 이 함수가 true를 반환하면 폼이 정상적으로 제출되고, false를 반환하면 데이터가 전송되지 않습니다.

JavaScript 코드

<script>
   <!--
      function validate() {
         // 모든 유효성 검사 로직이 여기에 들어갑니다
         // .........
         // 검사 결과에 따라 true 또는 false를 반환합니다
         return true; // 또는 return false;
      }
   //-->
</script>

HTML 코드

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

동작 원리

핵심은 onsubmit="return validate()" 부분입니다. return 키워드를 반드시 함께 사용해야 하며, 함수가 반환하는 값에 따라 폼 제출 여부가 결정됩니다. 만약 return 없이 함수만 호출하면 반환값과 관계없이 폼이 항상 제출되므로 주의해야 합니다.

이러한 패턴은 클라이언트 측 유효성 검사의 가장 기본적인 형태로, 필수 입력값 확인, 이메일 형식 검증, 비밀번호 일치 여부 확인 등 다양한 상황에서 활용됩니다.