form과 브라우저

form과 input 유효성체크

로그인시 유효성체크는 js 뿐만아니라 HTML 태그안에서도 사실 가능하다.

원하는 유효성체크의 기준과 html은 다음과 같다.

1. 필수 입력값

2. 글자의 길이가 최대 15글자로 제한

3. click 말고 키보드의 enter를 눌러도 해당 값이 전송되도록 하기

<form id="login-form">
    <input required type="text" placeholder="what is your name?" maxlength="15">
    <button type="submit">Login</button>
</form>

- form태그 안에서 button[type=submit] 요소를 넣어보자. 키보드의 엔터를 치면 브라우저가 리로드 되면서 전송된다.  

- input 태그를 필수 요소(required)로 지정하고 maxlength 속성으로 길이를 제한할 수 있다.

 

button 리로드 방지

button type이 submit이기 때문에 브라우저가 리로드된다. 이것은 type=submit의 기본 기능이다. 이 기본 기능을 막아주려면 자바스크립트로 다음과 같이 지정해주자.

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

function onLoginSubmit(event) {
	event.preventDefault(); // submit의 기본동작(reload) 막기
}
loginForm.addEventListener("submit", onLoginSubmit);