event.preventDefault() 서브밋방지

event.preventDefault()

html에서 태그의 고유 동작으로 페이지를 이동시키거나
form 안에 input등의 전송을 하는 동작을 중지시켜준다.

 

submitBtn.addEventListener("click", function(e){
    if(userID.value.length == 0){
        alert("아이디를 입력해주세요.");
        e.preventDefault();
    }else if(userPWD.value.length == 0){
        alert("비밀번호를 입력해주세요.");
        e.preventDefault();
    }else if(userPWD.value.length < 6){
        alert("비밀번호 6자리 이상 입력해주세요.");
        e.preventDefault();
    }
})

 

로그인 form에서 아이디와 비밀번호가 각각 공백이면 알림창을 띄우는 코드이다.

 

preventDefault()를 이용해서 서브밋을 방지함으로써

알림창을 띄우고 다음페이지로 가는 것을 막아준다.