Form

form validation

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
</form>

 

// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
  'use strict'

  const forms = document.querySelectorAll('.needs-validation');

  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }

      form.classList.add('was-validated');
    }, false)
  })
})()

 

1. novalidate | 기본적으로 폼의 유효성 검사는 브라우저가 하는데, 이를 bootstrap이 하도록 만들기 위해 noavlidate 옵션을 사용한다. 
2. required 
3. valid-feedback | 유효성 검사를 통과했을 때 보여줄 메세지를 설정할 수 있다.