<form action="success.html">
<div class="my-3">
<input type="text" class="form-control" id="loginID" />
</div>
<div class="my-3">
<input type="password" class="form-control" id="loginPW" />
</div>
<button type="submit" class="btn btn-primary" id="submit">
전송
</button>
<button type="button" class="btn btn-danger" id="close">
닫기
</button>
</form>
<script>
document.querySelector("form").addEventListener("submit", function (e) {
let id = document.querySelector("#loginID").value;
if (id == "") {
// 폼 전송 막기
e.preventDefault();
alert("Please enter the ID");
}
});
</script>
폼 전송 막는법: 이벤트리스너 콜백함수에 e라는 파라미터 추가해주고 e.preventDefault() 라고 작성하면 폼 전송이 되지 않음.