Bootstrap 5 Form Doğrulama

form doğrulama

farklı doğrulama sınıfları kullanarak kullanıcıya değerli geri bildirim sağlayabilirsiniz. Lütfen .was-validated veya .needs-validation form elementine ekleyebilirsiniz, formu göndermeden önce veya sonra doğrulama geri bildirimi sağlamanın hangi zaman diliminde olacağına bağlıdır. Giriş alanları yeşil (geçerli) veya kırmızı (geçersiz) çerçeve ile etiketlenecek, formdaki eksik içerikleri belirtmek için. Ayrıca, .valid-feedback veya .invalid-feedback mesajı kullanıyoruz, kullanıcıya eksik olan şeyleri veya formu göndermeden önce tamamlaması gerekenleri net bir şekilde bildirmek için.

örnek

Bu örnekte, formu göndermeden önce .was-validated Eksik olanı belirtmek için:

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Kullanıcı Adı:</label>
    <input type="text" class="form-control" id="uname" placeholder="Kullanıcı adı girin" name="uname" required>
    <div class="valid-feedback">Geçerli.</div>
    <div class="invalid-feedback">Bu alanı doldurun.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Parola:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Parola girin" name="pswd" required>
    <div class="valid-feedback">Geçerli.</div>
    <div class="invalid-feedback">Bu alanı doldurun.</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">Bu şartları kabul ediyorum.</label>
    <div class="valid-feedback">Geçerli.</div>
    <div class="invalid-feedback">Bu seçenek işaretlenirse devam edin.</div>
  </div>
  <button type="submit" class="btn btn-primary">Gönder</button>
</form>

Kendi kendine deneyin