5-7. 폼 유효성 검사
■ 폼 유효성 검사
다양한 검증 클래스를 사용하여 사용자에게 귀중한 피드백을 제공할 수 있습니다.
양식을 제출하기 전이나 후에 검증 피드백을 제공할 것인지에 따라 요소에 클래스 .was-validated를 추가합니다 .
<div class="container mt-3">
<h3>폼 유효성 검사</h3>
<form 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="Enter username" 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="Enter password" 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>
</div>
ex5-13.html의 실행 결과
