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!

(Visited 2.995 times, 1 visits today)