Validasi kata sandi menggunakan jQuery

Validasi kata sandi menggunakan jQuery

—

by

Webbiz.ID
in

Berikut adalah contoh aplikasi untuk Validasi cek kata sandi menggunakan jQuery.

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Form Registrasi</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h2>Form Registrasi</h2>
    <form id="registrationForm">
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" class="form-control" id="password" name="password">
      </div>
      <div class="form-group">
        <label for="confirmPassword">Konfirmasi Password:</label>
        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword">
        <small id="passwordError" class="text-danger"></small>
      </div>
      <button type="submit" class="btn btn-primary">Daftar</button>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#registrationForm').submit(function(event) {
        event.preventDefault();
        var password = $('#password').val();
        var confirmPassword = $('#confirmPassword').val();

        if (password !== confirmPassword) {
          $('#passwordError').text('Password tidak sesuai.');
        } else {
          $('#passwordError').text('');
          // Lakukan tindakan lainnya, seperti mengirim data ke server
        }
      });
    });
  </script>
</body>
</html>
HTML

Output:

See the Pen Validasi kata sandi menggunakan jQuery by WebbizID (@De-Orchids) on CodePen.

Pastikan untuk menyertakan library jQuery dan Bootstrap dengan menambahkan link stylesheet dan script di dalam <head> dan <body> tag.

Kode di atas akan memeriksa apakah nilai yang dimasukkan ke dalam kolom “Password” dan “Konfirmasi Password” sesuai. Jika tidak sesuai, maka akan ditampilkan pesan error di bawah kolom “Konfirmasi Password”. Jika sesuai, maka pesan error akan dihapus dan Anda dapat melanjutkan dengan tindakan lain, seperti mengirim data ke server.

Baca juga:

Anda dapat mengubah tampilan form dan pesan error sesuai dengan kebutuhan Anda.

Artikel Terbaru ⭐