JavaScript form & if 문법

Jun Lee·2023년 7월 8일

코딩애플 JavaScript

목록 보기
8/20

1. form 에서 전송 버튼 누를 때 공백검사 하기.

<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() 라고 작성하면 폼 전송이 되지 않음.

0개의 댓글