[JS] Input 유효성 검사 & alert 창 띄우기

새싹 개발자 뚜비 2022. 6. 14. 02:05

728x90

[ 노마드코더 학습 기록 ]

바닐라 JS로 크롬 앱 만들기(4.1 Form Submission)

이번엔 username에 대한 유효성 검사를 할 것이다.

username은 공백일 수 없고 너무 긴 이름이어도 안된다고 정하자.

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


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

loginButton.addEventListener("click", onLoginBtnClick);

그럼 우리는 이렇게 코드를 짜볼 수 있을 것이다.

먼저 매번 loginInput.value를 적는 것 대신에 const를 이용하여 변수를 만들어주고 if문과 alert을 이용해 사용자에게 알려준다.

이렇게 username이 없다면 "Please write your name"을 경고창으로 띄워지고, username이 15자를 넘는다면 "Your name is too long" 경고창을 띄워진다.

이런 방식으로 코드를 짤수도 있겠지만 다른 방법으로도 가능하다.

물론 JS만으로 작업을 해야할 때는 이렇게 코드를 짜야겠지만 브라우저 자체의 기능을 사용할수도 있다.

이미 있는 기능이라면 간단하게 그 기능들을 이용하는게 편리하고 좋으니까!

<body>
    <div id="login-form">
        <input 
        required
        maxlength="15"
        type="text" placeholder="What is your name?"
        />
        <button>Log In</button>
    </div>
    <script src="app.js"></script>
</body>

input은 많은 기능을 수행할 수 있다.

required을 통해 해당 input창을 필수 입력 항목으로 만들어 줄 수 있고 maxlength를 이용하면 최대 글자수를 조절할 수 있다.

이건 HTML의 기능으로 간단히 구현할 수 있으니 활용하면 좋을 것 같다.

하지만 문제는 Lon In 버튼을 클릭할 때 HTML에서 확인 작업을 안하고 있다.

그 이유는 해당 HTML의 부분이 form이 아니기 때문이다.

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

<!-- HTML -->

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

//JS

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

HTML의 input을 감싸주었던 것을 div에서 form으로 바꾼 후 JS 코드도 수정해준다.

그러면 공백인 채로 버튼을 누를 때 입력란을 작성하라고 뜨고 최대 길이로 설정했던 15자 이상 작성할 경우 아에 글자가 써지지 않게 된다.

이 모든 것은 브라우저 자체의 기능이며 우리가 쉽게 활용할 수 있다.

Log In을 클릭하면 URL에 ?가 따라붙는 것과 페이지가 새로고침되는 것을 확인할 수 있다.

값 입력 후에 버튼을 누르면 새로고침이 실행되고 값은 사라져버린다. 그 이유는 form이 submit되고 있기 때문이다.

input안에 있는 button을 누르거나 type이 submit인 input을 클릭하면 내가 작성한 form이 submit 된다.

즉, input의 내용이 submit되는 것이다. 그렇기 때문에 더이상 버튼을 클릭하는 이벤트는 신경 쓸 필요가 없다.

(내용 입력 후 엔터를 눌러도 form은 submit되기 때문이다.)

하지만 우리는 브라우저가 새로고침을 하지않고 user 정보를 저장하고 싶다.

그 방법은 다음 강의, 다음 블로그에서 알아보도록 하자.

728x90