Bootstrap 5 양식 검증

양식 유효성 검사

다른 유효성 검사 클래스를 사용하여 사용자에게 유용한 피드백을 제공할 수 있습니다. 다음을 추가하세요: .was-validated 또는 .needs-validation 를 <form> 요소에 추가하여 양식을 제출하기 전에 후에 제공할 유효성 검사 피드백을 결정합니다. 입력 필드는 녹색(유효) 또는 빨간색(무효) 경계선을 가지고 있어 양식에서 부족한 내용을 표시합니다. 또한 추가할 수 있습니다. .valid-feedback 또는 .invalid-feedback 메시지를 사용하여 사용자에게 부족한 부분이나 양식을 제출하기 전에 완료해야 할 내용을 명확히 알려줍니다.

예제

이 예제에서는 양식을 제출하기 전에 사용 .was-validated 빠뜨린 것을 지시해 주세요：

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">사용자 이름：</label>
    <input type="text" class="form-control" id="uname" placeholder="사용자 이름을 입력하세요" name="uname" required>
    <div class="valid-feedback">유효합니다.</div>
    <div class="invalid-feedback">이 필드를 입력하세요.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">비밀번호：</label>
    <input type="password" class="form-control" id="pwd" placeholder="비밀번호를 입력하세요" name="pswd" required>
    <div class="valid-feedback">유효합니다.</div>
    <div class="invalid-feedback">이 필드를 입력하세요.</div>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
    <label class="form-check-label" for="myCheck">이 조건에 동의합니다.</label>
    <div class="valid-feedback">유효합니다.</div>
    <div class="invalid-feedback">이 체크박스를 선택하여 계속하세요.</div>
  </div>
  <button type="submit" class="btn btn-primary">제출</button>
</form>

직접 시험해보세요