폼 만들며 배워보는 if else 오늘의 숙제 중 질문 있습니다.
====================================
<form action="">
<div class="my-3">
<input type="text" id="id" class="form-control">
</div>
<div class="my-3">
<input type="password" id="pw" class="form-control">
</div>
<button type="submit" class="btn btn-primary">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
<script>
// 전송 버튼을 눌렀을 때
// input에 입력한 값이 공백이면 알림창 띄워 주세요.
const form = document.querySelector('form');
const id = document.querySelector('#id');
const pw = document.querySelector('#pw');
document.querySelector('.btn-primary').addEventListener('click', checkForm);
function checkForm() {
if (id.value == ''){
alert('아이디 입력');
form.id.focus();
} else if (pw.value == ''){
alert('비밀번호 입력');
form.pw.focus();
}
}
</script>
====================================
이 상태에서는 alert창은 잘 뜨지만 focus() 이동은 제대로 안됩니다.
전송 버튼(<button type="button" class="btn btn-primary">전송</button>)의 type을 버튼으로 고치고 테스트하면
focus() 이동이 잘 됩니다.
type="submit" 일 때 focus() 이동은 어떻게 처리하나요?
