JavaScript에서 폼 제출 시 페이지 새로고침 방지하는 방법

사용자가 HTML 폼을 제출할 때 submit 이벤트를 클라이언트 측에서 직접 처리하고, 폼이 제출되는 즉시 브라우저가 페이지를 새로고침하지 않도록 만들어야 하는 상황을 생각해 보겠습니다.

HTML 폼 예제

먼저 다음과 같은 기본적인 연락처 폼이 있다고 가정합니다.

<form name="formcontact1" action="#">
<input
    type='text'
    name='email'
    size="36"
    placeholder="Your e-mail :)"/>
<input
    type="submit"
    name="submit"
    value="SUBMIT"
    onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>

preventDefault()로 새로고침 막기

가장 간단하면서도 확실한 방법은 ValidateEmail() 함수 정의의 최상단에 다음 코드 한 줄을 추가하는 것입니다.

function ValidateEmail(event, inputText){
    event.preventDefault();
    //나머지 함수 로직은 여기에 작성
}

preventDefault() 메서드는 브라우저에게 기본 동작(default behaviour)을 수행하지 말 것을 지시합니다. 즉, 폼 제출 시 발생하는 페이지 새로고침을 차단하고, 해당 이벤트를 클라이언트 측 JavaScript에서 자유롭게 처리할 수 있게 해줍니다.

참고: event.preventDefault()를 호출하려면 함수에 이벤트 객체(event)가 전달되어야 합니다. 인라인 onclick 속성 대신 addEventListener('submit', ...) 방식으로 이벤트를 등록하면 이벤트 객체를 더 안전하게 받을 수 있습니다.

전체 예제 코드

위 내용을 모두 적용한 완전한 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="formcontact1" action="#">
<input
    type='text'
    name='email'
    size="36"
    placeholder="Your e-mail :)"/>
<input
    type="submit"
    name="submit"
    value="SUBMIT"
    onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>
<script>
{
    function ValidateEmail(event, inputText){
        event.preventDefault();
        //나머지 함수 로직은 여기에 작성
    }
}
</script>
</body>
</html>

마무리

이처럼 preventDefault() 한 줄만 추가하면 폼 제출로 인한 불필요한 페이지 새로고침을 손쉽게 막을 수 있습니다. 이메일 유효성 검사처럼 클라이언트 측에서 먼저 입력값을 확인해야 하는 경우 특히 유용하며, 검증 결과에 따라 서버 요청 여부를 유연하게 결정할 수 있습니다.