form api 와 bootstrap validation - 풀스택개발 EastFlag

bootstrap validation

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

form에 was-validated 클래스만 넣으면 html5 validation을 체크하고 정상적인 경우는 valid-feedback에 비정상적인 경우에는 invalid-feedback을 보여주게 된다.

bootstrap으로 폼을 구성하고 에러일 경우는 valid-feedback에 정상일 경우에 valid-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>

<p class="h1">Register</p>

Looks good!

</div>

아이디는 4자 이상 입력해야 합니다.

</div>

Great!

</div>

한글로 시작하는 2~5 이내로 입력하세요.

</div>

Looks good!

</div>

이메일 형식으로 입력해야 합니다.

</div>

<button class="btn btn-primary" type="submit">Register!</button>

</div>

</form>

</div>

submit 버튼을 누르면 만일 에러일 경우는 form에 was-validated 클래스를 삽입한다.

(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);
}());

(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);

}());

CodePen

See the Pen Form validation – Bootstrap 4 by LeeDongKee (@eastflag) on CodePen.default