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 경우 표시할 메시지
