JavaScript에서 폼 제출을 중지하는 방법 – preventDefault와 return false 활용하기

웹 개발을 하다 보면 사용자가 입력한 값이 유효하지 않을 때 폼(form) 제출 자체를 막아야 하는 경우가 자주 발생합니다. JavaScript에서는 함수의 반환값과 event.preventDefault() 메서드를 활용하면 폼 제출을 손쉽게 중단할 수 있습니다.

1. event.preventDefault()로 제출 이벤트 차단하기

가장 기본적인 방법은 폼의 onsubmit 이벤트에서 event.preventDefault()를 호출하는 것입니다. 이 메서드는 브라우저가 수행하려는 기본 동작(폼 전송 및 페이지 새로고침)을 취소합니다.

<form onsubmit = "event.preventDefault(); myValidation();">

2. 유효성 검사 함수 작성하기

위 코드에서 호출되는 myValidation() 함수는 다음과 같이 작성할 수 있습니다. 조건을 검사한 후, 실패 시 false를 반환하여 제출을 막습니다.

function myValidation()
{
    if(조건이 충족되지 않는 경우)
    {
        alert("앗! 유효성 검사에 실패했습니다!");
        returnToPreviousPage();
        return false;
    }
    alert("유효성 검사가 성공적으로 완료되었습니다!");
    return true;
}

동작 원리 정리

• return false: 유효성 검사가 실패하면 false를 반환하여 폼이 서버로 전송되지 않도록 합니다.
• return true: 모든 조건이 충족되면 true를 반환해 폼 제출이 정상적으로 진행됩니다.

즉, 폼 제출이 실패하면 false가 반환되어 페이지 이동 없이 사용자에게 알림을 표시하고 이전 상태를 유지할 수 있습니다. 이 방식은 회원가입, 로그인 등 입력값 검증이 필요한 거의 모든 폼에서 활용됩니다.