자바스크립트 기초 - submit, 회원가입, 검증

이름, 비밀번호, 이메일 등 미입력 항목이 있을 경우 체크하는 소스.

경고창(얼럿창 alert)을 띄웁니다.

오류 항목이 있을 경우 preventDefault(); 통해 전송(submit)하는 것을 막습니다.

 

연관글

자바스크립트 기초- 비밀번호 일치 확인 및 글자수세기

 

<form id = "joinform">
  <label for="name">이름</label><input type="text" id="name"><br>
  <label for="email">이메일</label><input type="text" id="email"><br>
  <label for="password">비밀번호</label><input type="text" id="password"><br>
  <input type="submit" value="회원가입">
</form>

<script type="text/javascript">
  var f = document.getElementById("joinform");
  f.addEventListener("submit" , function(e) {
    if(f.name.value.length == 0 ) {
      alert("이름을 입력하세요");
      e.preventDefault();
      f.name.focus();
      return;
    }
    if(f.email.value.length == 0 ) {
      alert("이메일을 입력하세요");
      e.preventDefault();
      f.email.focus();
      return;
    }
    if(f.password.value.length == 0 ) {
      alert("비밀번호를 입력하세요");
      e.preventDefault();
      f.password.focus();
      return;
    }
  });

</script>