validation check 유효성체크 form 사용

니코 #바닐라JS로크롬앱만들기

 

index.html

 
    <div id="login-form">
        <input type="text" placeholder="what is your name?">
        <button>Log In</button>
    </div>

 

 

app.js

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

// console.dir(loginForm)

const loginInput = loginForm.querySelector("input");
const loginBtn = loginForm.querySelector("button");
console.dir(loginInput);
console.log(loginBtn);

let userName = "";

function getUserName (){
    userName = loginInput.value;
    console.log(userName);


    // validation check
    if (userName === "") {
        alert("Pelase type your name.");
    } else if (userName.length > 15) {
        alert("Your name is too long. should be less then 15 letters.");
    } else {
       alert("Hello " + userName + "!"); 
    }
    
} 

console.log(userName);

loginBtn.addEventListener("click", getUserName);

이렇게 해도 안되는건 아니지만..

form 을 사용해서 유효성체크를 하는것이 더 낫다. (html에 원래 내장되어 있는 기능이며 따로 js 코드를 쓰지 않아도 되기 때문에..)

폼 내부 인풋에서 엔터를 치면 바로 submit이 되면서 페이지가 새로고침된다..

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

 

form submit 될 때 되는 새로고침 막기

function onLoginSubmit(event){
    event.preventDefault();
    console.log(event);
    console.log("submitted");
}


loginForm.addEventListener("submit", onLoginSubmit);

괄호안에  event 를 넣어주는게 관행이고, preventDefault() 함수를 사용하면 이벤트가 실행될때의 브라우저의 default behavior ( 이 경우엔 form 이 submit 될때 무조건 새로고침이 강제로 되는것) 를 막을 수 있다

 

 

 

 

ㅇ ㅏ.... 저기능을 처음 알았음.. 내가 모르는것은얼마나 되는가..