1. username의 유효성 검사하기
이전 글을 보고 이 글을 읽기 바란다.
username이 비어 있어도 안 되고, 너무 긴 username이어도 안 된다.
function onLoginBtnClick() {
const username = loginInput.value;
if (username === "") {
alert("Please write your name");
} else if (username.length > 5) {
alert("Your name is too long.");
}
}
loginButton.addEventListener("click", onLoginBtnClick);2. Form Submission
HTML에서 div 대신에 form을 사용해준다.
<body>
<div id="login=form">
<input required maxlength = "15" type = "text" placeholder="What is your name?"
<button>Log In</button>
</div>
</body>required maxlength = "15"은 최대 입력 가능 글자 수가 15자까지 라는 의미이다.
여기서 div를 form으로 변경해준다.
<body>
<form id="login-form">
<input required maxlength = "15" type = "text" placeholder="What is your name?"
<button>Log In</button>
</div>
</body>이렇게 변경해주면 JS에서 if문을 제거해주어도 된다.
function onLoginBtnClick() {
const username = loginInput.value;
console.log(username);
}
loginButton.addEventListener("click", onLoginBtnClick);여기서 잠깐!
form이 submit되고 있기 때문에 웹사이트를 계속 재시작 시키고 있다.
input 안에 있는 button을 누르거나 type이 sumbit인 input을 클릭하면 작성한 form이 submit 된다.
form 안에서 엔터를 누르고 input이 더 존재하지 않는다면 자동으로 submit 된다는 규칙
계속 엔터를 누를 때마다 submit 된다. 브라우저가 새로고침 되는 것이 아니라 입력한 정보를 브라우저에 저장하고 싶다.
form이 submit 되는 것을 막아주어야 한다.
3. login-from
우리는 이제 button 코드는 필요 없고 login-form 자체가 필요하다.
const loginFrom = document.querySelector("#login-from");
const loginInput = document.querySelectior("#login-form input");
function onLoginSubmit() {
const username = loginInput.value;
console.log(username);
}
loginForm.addEventListener("submit", onLoginSubmit);이 코드로 값을 입력하면 submit event를 감지한다. 하지만 아직 새로고침은 감지하지 못한다.
브라우저는 엔터를 누를 때마다 새로고침을 하고 form을 submit 하도록 되어 있다. 이게 바로 기본 동작인데, 우리가 해야 할 일은 기본 동작이 발생하지 않도록 하는 것.
4. 브라우저가 기본 동작을 실행하지 못하게 막기
funtion onLoginSubmit(event) {
event.preventDefault();
console.log(event);
}preventDefault()는 브라우저가 기본 동작을 실행하지 못하도록 막는다.
loginForm.addEventListener("submit", onLoginSubmit);
onLoginSubmit()loginForm.addEventListener("submit", onLoginSubmit);는 submit 이벤트가 발생한다면, onLoginSubmit 함수를 실행시킨다는 의미이다.
JS는 onLoginSubmit함수 호출 시 argument를 담아서 호출한다.
결론!!!
우리는 원하지 않지만 form을 submit 하면 브라우저는 페이지를 새로고침 하게 되어 있다.
preventDefault()를 추가하면서 브라우저의 기본 동작을 막을 수 있다.
