LOGIN Part 2_Form Submission

createhb21 2021. 6. 27. 04:38

이전 포스트 완성 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Momentum App</title>
  </head>
  <body>
    <div id="login-form">
      <input type="text" placeholder="What is your name?" />
      <button>Log In</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

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

function onLoginBtnClick() {
  console.log("hello", loginInput.value);
}

loginButton.addEventListener("click", onLoginBtnClick);

자 이제 username의 유효성을 검사해보자 input의 입력될 username은 비어있어서는 안되고,

너무 긴 텍스트여도 안되는 것으로 설정을 하자.

우선, 매번 loginInput.value를 적는 것 대신에 우리는 const를 이용한 변수 username 에다가 loginInput.value 값을 할당해주자.

function onLoginBtnClick() {
	const username = loginInput.value;
}

그리고 그 밑의 줄에 밑의 조건을 만족하는 if 문을 넣어주자.

1) username 값이 없을 경우 경고문(alert)를 띄어줌

2) username.length > 15일 경우 경고문을 띄어줌

function onLoginBtnClick() {
    const username = loginInput.value;
    if (username === "") {
    	alert("Please write your name");
    } else if(username.length > 15) {
    	alert ("Your name is too long.");
    }
}

하지만, 우리는 브라우저 자체의 기능을 사용할 수도 있다. 우리는 항상 최고의 툴을 사용해야 하고 그리고 이미 가지고 있는 기능들을 사용하는게 좋다.

HTML로 돌아가서 input 태그에 다음을 추가해보자.

	<input 
    	    required
            maxlength="15"
            type="text"
            placeholder="What is your name?"
 	/>

하지만 위 input을 통한 유효성 검사를 정상적으로 진행하기 위해서는, input 그 자체만으로는 가능하지 않고 input을 감싸주는 form 태그가 필요하다(HTML의 도움을 활용하려면 input을 form 안에 위치시켜야 한다). 따라서 input을 감싸주는 form 태그를 작성하고, 기존의 button 태그 대신 input type="submit"을 사용해 코드를 작성하자. form에는 id명을 추가해주자.

    <form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <input type="submit" value="Log In" />
    </form>

따라서, 위의 HTML 코드를 입력함으로써 JS에서의 작업들은 굳이 쓸 필요가 없어졌으므로, 삭제해준다.

function onLoginBtnClick() {
    const username = loginInput.value;
}

또한 HTML에서 button태그를 input submit으로 바꿔줌으로 인해서

loginButton.addEventListener("click", onLoginBtnClick);

더이상 위의 click이벤트에 흥미를 가질 필요가 없어졌다. 왜냐하면 HTML상의 form안에서 엔터를 누를 때마다 input이 더 존재하지 않는다면 자동적으로 submit이 되고, 자동적으로 새로고침까지 실행되기 때문이다. 또한 form안에 있는 버튼을 눌르게 될 때마다, 이때도 form이 자동적으로 submit되고 새로고침이 실행되기 때문이다. 따라서 더 이상 click에 신경 쓸 필요가 없다는 것이다.

app.js의

const loginButton = document.querySelector("#login-form button");

부분도 삭제해주자.

이제 우리의 관심사는 form을 submit 하는 것이다. 우리는 form 이 submit 될 때마다 웹사이트 전체가 매번 새로고침 하는 것을 원하지 않기 때문에, 다음 포스트에서 우리의 목표는 form이 submit 하는 순간에 우리는 브라우저가 새로고침을 하지 않고 user 정보를 저장하도록 하는 것이다.

완성 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Momentum App</title>
  </head>
  <body>
    <form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <input type="submit" value="Log In" />
    </form>
    <script src="app.js"></script>
  </body>
</html>

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

function onLoginBtnClick() {
  const username = loginInput.value;
}

loginButton.addEventListener("click", onLoginBtnClick);