Validasi Kata Sandi Menggunakan JavaScript

Validasi Kata Sandi Menggunakan JavaScript

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk melakukan validasi kata sandi menggunakan JavaScript dan Bootstrap.

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Validasi Kata Sandi</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h2>Validasi Kata Sandi</h2>
    <form>
      <div class="form-group">
        <label for="password">Kata Sandi:</label>
        <input type="password" class="form-control" id="password" placeholder="Masukkan kata sandi" required>
      </div>
      <div class="form-group">
        <label for="confirmPassword">Konfirmasi Kata Sandi:</label>
        <input type="password" class="form-control" id="confirmPassword" placeholder="Masukkan ulang kata sandi" required>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

  <script>
    // Validasi kata sandi
    function validatePassword() {
      var password = document.getElementById("password").value;
      var confirmPassword = document.getElementById("confirmPassword").value;

      if (password != confirmPassword) {
        alert("Kata sandi tidak cocok!");
        return false;
      }
      return true;
    }

    // Menghubungkan fungsi validasi dengan form submit
    var form = document.querySelector("form");
    form.addEventListener("submit", function(event) {
      if (!validatePassword()) {
        event.preventDefault();
      }
    });
  </script>
</body>
</html>
HTML

Output:

See the Pen Validasi Kata Sandi Menggunakan JavaScript by WebbizID (@De-Orchids) on CodePen.

Kode di atas akan membuat halaman web dengan form untuk memasukkan kata sandi dan mengkonfirmasi kata sandi. Ketika form disubmit, fungsi validatePassword() akan dipanggil untuk memeriksa apakah kata sandi dan konfirmasi kata sandi cocok. Jika tidak cocok, akan muncul pesan peringatan dan form tidak akan disubmit.

Baca juga:

Kode ini menggunakan Bootstrap untuk mengatur tampilan form dengan menggunakan kelas-kelas CSS yang disediakan oleh Bootstrap.

Artikel Terbaru ⭐