[form] BS5 - Form Validation (폼유효성검사)

Form 유효성 검사 예제

 

<form action="/action_page.php" class="was-validated">

    <div class="mb-3 mt-3">

      <label for="name" class="form-label">Name:</label>

      <input type="text" class="form-control" id="name" placeholder="Name 입력" name="name" required>

      <div class="valid-feedback">유효 O</div>

      <div class="invalid-feedback">이름 입력</div>

    </div>

    <div class="mb-3">

      <label for="pwd" class="form-label">Password:</label>

      <input type="password" class="form-control" id="pwd" placeholder="Password 입력" name="pwd" required>

      <div class="valid-feedback">유효 O</div>

      <div class="invalid-feedback">비밀번호 입력</div>

    </div>

    <div class="form-check mb-3">

      <input class="form-check-input" type="checkbox" id="agree"  name="agree" required>

      <label class="form-check-label" for="agree">약관 동의</label>

      <div class="valid-feedback">유효 O</div>

      <div class="invalid-feedback">체크 필수</div>

    </div>

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

</form>

 

---

PS. 코드 해석

 

1. <form> 태그에 아래 클래스 추가해, 유효성 체크 시기 결정 가능.

• .needs-validation 클래스 : 폼 제출 전 유효성 체크
• .was-validated 클래스 : 폼 제출 후 유효성 체크

 

2. 유효성 여부에 따라 입력폼 테두리 색깔 다름.

• 녹색 : 유효 O
• 빨강 : 유효 X (즉, 올바르게 입력 필요)

 

3. 유효성 여부에 따라 사용자에게 메세지 전달 가능.

• .valid-feedback 클래스 - 유효O 경우 표시할 메세지
• .invalid-feedback 클래스 - 유효X 경우 표시할 메시지