bootstrap - Validation

validation

bootstrap에서는 html5 validation을 그대로 이용한다.

form에 was-validated 클래스만 넣으면 html5 validation을 체크해준다.

• 정상적인 경우는: valid-feedback
• 비정상적인 경우: invalid-feedback

<div class="container">
  <p class="h1">Register</p>
 
  <form id="needs-validation" novalidate>
    <div class="form-group">
      <label for="id">아이디</label>
      <input type="text" class="form-control" id="id"
             placeholder="아이디" required minlength="4">
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        아이디는 4자 이상 입력해야 합니다.
      </div>
    </div>
    
    <div class="form-group">
      <label for="name">성명</label>
      <input type="text" class="form-control" id="name"
             placeholder="성명" required pattern="^[가-힣]{2,5}$">
      <div class="valid-feedback">
        Great!
      </div>
      <div class="invalid-feedback">
        한글로 시작하는 2~5 이내로 입력하세요.
      </div>
    </div>
    
    <div class="form-group">
      <label for="email">E-mail</label>
      <input type="email" class="form-control" id="email"
             placeholder="E-mail" required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        이메일 형식으로 입력해야 합니다.
      </div>
    </div>
 
    <div class="form-group mt-3">
      <button class="btn btn-primary" type="submit">Register!</button>
    </div>
  </form>
</div>  

(function() {
  "use strict";
  window.addEventListener("load", function() {
    var form = document.getElementById("needs-validation");
    form.addEventListener("submit", function(event) {
      if (form.checkValidity() == false) {
        event.preventDefault();
        event.stopPropagation();
        form.classList.add("was-validated");
      }
      
      // 서버 연동 처리
    }, false);
  }, false);
}());

https://eastflag.co.kr/frontend/html5/html5-bootstrap-validation/