Bootstrap, formlar için kullanıcı girdilerini doğrulamak amacıyla validation (doğrulama) işlevselliği sağlar. Bu özellik, kullanıcıların formları doğru ve eksiksiz bir şekilde doldurmasını sağlamak için çeşitli geri bildirimler sunar. Bootstrap, hem HTML5 özellikleri hem de CSS sınıfları kullanarak kullanıcı girdilerini doğrulamak için birkaç yöntem sunar. İşte Bootstrap ile form doğrulama hakkında bilgilendirme:
1. Temel Form Yapısı
Öncelikle, doğrulama işlemini gerçekleştireceğiniz temel bir form yapısı oluşturmalısınız. Örneğin:
<div class="container mt-5">
<form id="myForm">
<div class="form-group mb-3">
<label for="inputEmail">E-posta</label>
<input type="email" class="form-control" id="inputEmail" placeholder="E-posta adresinizi girin" required>
<div class="invalid-feedback">Lütfen geçerli bir e-posta adresi girin.</div>
</div>
<div class="form-group mb-3">
<label for="inputPassword">Şifre</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Şifrenizi girin" required>
<div class="invalid-feedback">Şifre gerekli.</div>
</div>
<button type="submit" class="btn btn-primary">Gönder</button>
</form>
</div>
2. Doğrulama Mesajları
-
required: Bu özellik, form elemanının doldurulmasının zorunlu olduğunu belirtir. -
.invalid-feedback: Geçersiz giriş durumunda gösterilecek olan geri bildirim mesajını içerir.
3. Bootstrap Doğrulama Sınıfları
Bootstrap, form elemanlarının durumunu göstermek için bazı CSS sınıfları kullanır:
-
.is-valid: Geçerli bir giriş yapıldığında uygulanır. -
.is-invalid: Geçersiz bir giriş yapıldığında uygulanır.
4. JavaScript ile Doğrulama
Formun gönderilmesi sırasında doğrulama işlemini JavaScript kullanarak gerçekleştirebilirsiniz. Aşağıda, bir formun doğrulama işlemini yapan basit bir JavaScript kodu örneği verilmiştir:
<script>
(function (
) {
'use strict'
const forms = document.querySelectorAll('.needs-validation')
Array.from(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
5. Tam Örnek
Aşağıda, doğrulama özelliği içeren tam bir form örneği bulunmaktadır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Form Doğrulama Örneği</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>Form Doğrulama Örneği</h2>
<form class="needs-validation" novalidate id="myForm">
<div class="form-group mb-3">
<label for="inputEmail">E-posta</label>
<input type="email" class="form-control" id="inputEmail" placeholder="E-posta adresinizi girin" required>
<div class="invalid-feedback">Lütfen geçerli bir e-posta adresi girin.</div>
</div>
<div class="form-group mb-3">
<label for="inputPassword">Şifre</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Şifrenizi girin" required>
<div class="invalid-feedback">Şifre gerekli.</div>
</div>
<button type="submit" class="btn btn-primary">Gönder</button>
</form>
</div>
<script>
(function (
) {
'use strict'
const forms = document.querySelectorAll('.needs-validation')
Array.from(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
</body>
</html>
6. Özelleştirme
Doğrulama mesajlarını ve stillerini özelleştirmek için CSS kullanabilirsiniz. Örneğin:
.invalid-feedback {
font-size: 0.9rem; /* Geri bildirim mesajı boyutu */
color: #dc3545; /* Kırmızı renk */
}
7. Özet
Bootstrap ile form doğrulama, kullanıcı girdilerini kontrol etmek ve kullanıcı deneyimini artırmak için etkili bir yöntemdir. Form elemanlarına eklenen HTML5 özellikleri ve Bootstrap sınıfları sayesinde kullanıcıların formları doğru bir şekilde doldurmasını sağlayabilirsiniz. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.