๋ก๊ทธ์ธ, ํ์๊ฐ์
๊ณผ ๊ฐ์ ์
๋ ฅํผ ํ์ด์ง์์ ๋ฐ์ดํฐ๊ฐ ๋ชจ๋ ์
๋ ฅ๋๋ฉด
ํ๋จ ํ์ธ(๋ค์,์ ์ถ ๋ฑ)๋ฒํผ์ด ๋นํ์ฑํ์๋ค๊ฐ ํ์ฑํ๋๋ ๊ธฐ๋ฅ์ ํ๋ก ํธ์์ ์คํฌ๋ฆฝํธ๋ก ๊ตฌํํด๋ณด๊ณ ์ ํ๋ค.
๋ณต์กํ ์
๋ ฅํผ ํ์ด์ง๋ฅผ ์ ํ๊ธฐ ์ ์ ๊ฐ๋จํ ๋ก๊ทธ์ธ ํ์ด์ง์์ ๋จผ์ ๊ตฌํ ํด๋ณด๊ณ ์ ํ๋ค.
<section class="contents login_contents">
<div class="container">
<!-- ์ ํจ์ฑ ๊ฒ์ฌ form_wrap_line ์ error ์ถ๊ฐ -->
<div class="form_wrap_line login_top">
<div class="form-group-wrap">
<div class="form-group">
<input type="text" id="user_id" class="form-control box" placeholder="์นด์นด์ค๊ณ์ " title="์นด์นด์ค๊ณ์ ">
</div>
<div class="form-group">
<input type="password" id="user_pw" class="form-control box" placeholder="๋น๋ฐ๋ฒํธ" title="๋น๋ฐ๋ฒํธ">
</div>
</div>
<div class="btn-group">
<button type="button" id="btn_login" class="btn btn_lg btn_primary" disabled>๋ก๊ทธ์ธ</button>
</div>
<p class="caution">์นด์นด์ค๊ณ์ ๋๋ ๋น๋ฐ๋ฒํธ๋ฅผ ๋ค์ ํ์ธํด์ฃผ์ธ์</p>
</div>
<div class="btn-login-util">
<button type="button" class="btn_find_id">์นด์นด์ค๊ณ์ ์ฐพ๊ธฐ</button>
<button type="button" class="btn_find_pw">๋น๋ฐ๋ฒํธ ์ฌ์ค์ </button>
</div>
</div>
</section>
const formWrap = document.querySelector('.form_wrap_line');
const idForm = document.querySelector('#user_id');
const pwForm = document.querySelector('#user_pw');
const loginButton = document.querySelector('#btn_login');
let idCheck = false;
let pwCheck = false;
const pushValue = () => {
idForm.addEventListener('keyup', () => {
idCheck = true
});
pwForm.addEventListener('keyup', () => {
pwCheck = true
});
}
pushValue();
const pushValue () => {
pwForm.addEventListener('keyup', () => {
if(idForm.value && pwForm.value){
loginButton.disabled = false;
} else {
loginButton.disabled = true;
}
});
}
pushValue();
idForm.addEventListener('keyup', activeEvent);
pwForm.addEventListener('keyup', activeEvent);
loginButton.addEventListener('click', errorEvent);
function activeEvent() {
switch(!(idForm.value && pwForm.value)){
case true : loginButton.disabled = true; break;
case false : loginButton.disabled = false; break
}
}
function errorEvent() { // ์ด๊ฑด ๊ทธ๋ฅ error ๋ฌธ๊ตฌ ์ถ๋ ฅํด๋ณด๋ ค๊ณ ๋ง๋ค์ด๋ด.(์ ๊ฒฝ์์จ๋๋จ)
formWrap.classList.add('error');
}
!(true) = false
โก ๋ฒํผ ํ์ฑํ !(false) = true
โก ๋ฒํผ ๋นํ์ฑํ๋์์ธ์ด ์ฌ์ฌํด์ ์นดํก ๋ก๊ทธ์ธ ํ๋ฉด ์ฐธ๊ณ ํจ๐
์ ํจ์ฑ ๊ฒ์ฌ๋ error๋ฌธ๊ตฌ ์ถ๋ ฅํด๋ณด๋ ค๊ณ ๊ทธ๋ฅ ๋ง๋ค์ด๋ด๐