preventDefault()

유효성 검사

회원가입 양식을 작성할 때, 필수요소를 빼먹거나, 비밀번호나 전화번호 등이 정보를 잘못 입력했을 경우,
유효성 검사를 통하여 사용자가 회원가입 정보를 잘못 입력하는 경우를 사전에 방지해주고,
비밀번호 재확인을 통하여 사용자로 하여금 본인이 입력한 데이터를 보다 정확하게 인지 시켜줍니다.

최근에 개인정보를 입력하는 사용자와 개인정보 데이터를 보관, 관리하는 개발자 입장에서
최대한 오류를 줄이기 위하여 좀 더 쉽게 정보를 입력하고, 관리하는 방법으로 폼들이 변화되고 있습니다.

 

출처: https://goddino.tistory.com/52

 

 

 

 

input 의 유효성 검사()를 작동시키기 위해서는 input 이 form 안에 있어야 한다.

↓

 

<form id="login_form">
        <input required maxlength="15" type="text" placeholder="What is your name?" />
        <button>Log in</button>
    </form>

 

버튼을 클릭하면 페이지가 새로고침 되는데 그 이유는 form 이 submitted 되기 때문이다. (=엔터나 클릭할때 발생)

(새로고침이 기본 동작이다.)

 

아무리 button을 눌러도 html에서 제공하는 유효성 알럿이 안뜨더라구요 ㅠㅠ

button 태그에서 전 버튼을 만드는 습관이 button태그 안에 type="button"을 추가하는 건데요.

여기서는 form태그 안의 button이 "제출"의 역할을 하는 것이여서 button 태그의 기본값인 "submit"으로 그냥 두어야 제출이 되며 html에서 제공하는 유효성 알럿도 뜨게 되는 것을 알게되었습니다!
도움이 되었으면 좋겠습니다.😂

 

input 안에 button 태그나 submit 태그가 이러한 서브밋 이벤트를 수행한다.

 

 

 

 

 

 

 

javascript

 

const loginForm = document.querySelector('#login_form');
const loginInput = document.querySelector('#login_form input');


function onLoginSubmit() {
    const username = loginInput.value;
    console.log(username);
}


loginForm.addEventListener('submit', onLoginSubmit);

 

이렇게 하면 submit 이 발생하게 되어 콘솔창을 확인하면 출력했다가 빠르게 사라지는 것을 볼 수 있다. 새로고침이 되기 때문이다. 

 

 

 

 

새로고침을 방지하는 방법은...

 

const loginForm = document.querySelector('#login_form');
const loginInput = document.querySelector('#login_form input');


function onLoginSubmit(tomato) {
    tomato.preventDefault();      // 브라우저가 기본 동작을 실행하지 못하게 막기 //
    console.log(tomato);
}



loginForm.addEventListener('submit', onLoginSubmit); // JS는 onLoginSubmit함수 호출시 인자를 담아서 호출함. 
//해당 인자는 event object를 담은 정보들

 

먼저 tomato 를 이용해서 인자를 표시해준다. 그리고 preventDefault() 메서드로 새로고침을 방지한다. 그러면 console.log 의 결과 내용이 계속 유지가 된다.