Bootstrap Validation Nasıl Kullanılır?
Bootstrap kütüphanesini projelerimizde sıkça kullanılıyoruz. Bu derste herhangi bir JS eklentisi ile validation işlemlerini yapmayı değil sadece basit bir bootstrap sınıfı ile html formlarda kullandığımız required özelliğinin form alanlarında tetiklediği doğrulama efektlerini kullanmayı öğreneceksiniz.
Projede https://getbootstrap.com/docs/4.3/getting-started/introduction/ adresinde ki Starter bootstrap şablonu kullandım.

Bu doğrulama efektini sağlayan sadece <form etiketi içerisinde kullandığımız was-validated sınıfıdır.
<form action="" method="post" class="was-validated">
Projenin Tamamı
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Bootstrap Validation</title> </head> <body> <div class="container my-5"> <form action="" method="post" class="was-validated"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" required="" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="number" class="form-control" required="" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
Ücretsiz kurs ister misin kaydol!
İstanbul Üniversitesi Yönetim Bilişim Sistemleri Yüksek Lisans derecem ve kamu sektöründeki tecrübemle profesyonel kariyerime Yazılım Yöneticisi olarak devam ediyorum. Edindiğim bilgi birikimi ve deneyimlerimi, yazılım ve teknoloji alanında kendini geliştirmek isteyenlere rehberlik etmek amacıyla paylaşıyorum.
Bu kanalda, sıfırdan ileri seviyeye kadar kapsamlı ve pratik odaklı yazılım dersleri bulabilir, kariyer yolculuğunuzda bir adım öne geçebilirsiniz. Eğer yazılım dünyasında kendinize sağlam bir yer edinmek istiyorsanız, doğru yerdesiniz.
Haydi, öğrenmeye ve birlikte büyümeye başlayalım!