Bootstrap Formlar Validation
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.
Bu ders size yardımcı oldu mu? Puan verin!
Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.
Sıkça Sorulan Sorular (SSS)
Bu ders ve konuyla ilgili en çok merak edilenler
Bootstrap Formlar Validation dersini öğrenmek için ön koşul var mı?
Bu eğitim temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.
Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?
Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.
Takıldığım bir yerde nereden soru sorabilirim?
Dersin altındaki topluluk yorumları bölümünden sorunuzu sorabilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.
Topluluk Yorumları (0)
Ders Hakkında Yorum Yap veya Soru Sor
Henüz yorum yapılmamış. İlk yorumu siz yazın!