BS5 formani tekshirish
Formani tekshirish (validatsiya)
Foydalanuvchilarga foydali fikr-mulohaza (feedback) berish uchun turli validatsiya klasslaridan foydalanishingiz mumkin. Validatsiya natijasini formani yuborishdan oldin yoki keyin ko‘rsatmoqchi ekaningizga qarab, <form> elementiga .was-validated yoki .needs-validation ni qo‘shing. Formada nima yetishmayotganini ko‘rsatish uchun kiritish maydonlari yashil (to‘g‘ri) yoki qizil (noto‘g‘ri) chegaraga ega bo‘ladi. Shuningdek, formani yuborishdan oldin nima yetishmayotgani yoki nima qilish kerakligini foydalanuvchiga aniq aytish uchun .valid-feedback yoki .invalid-feedback xabarini qo‘shishingiz mumkin.
Misol
Ushbu misolda formani yuborishdan oldin nima yetishmayotganini ko‘rsatish uchun .was-validated dan foydalanamiz:
<form action="/action_page.php" class="was-validated">
<div class="mb-3 mt-3">
<label for="uname" class="form-label">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</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">I agree on blabla.</label>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!