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 경우 표시할 메시지
주소 복사
랜덤 이동
최신댓글