Validasi Email dan Password pada Form login Menggunakan JavaScript

Validasi Email dan Password pada Form login Menggunakan JavaScript

Berikut adalah contoh kode untuk melakukan validasi pada input email dan password pada sebuah form login menggunakan JavaScript dan Bootstrap

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Validasi Form</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" onsubmit="return validateForm()">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Masukkan email" required>
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" class="form-control" id="password" placeholder="Masukkan password" required>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

  <script>
    function validateForm() {
      var email = document.getElementById("email").value;
      var password = document.getElementById("password").value;

      // Validasi email
      var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(email)) {
        alert("Email tidak valid");
        return false;
      }

      // Validasi password
      if (password.length < 8) {
        alert("Password harus memiliki minimal 8 karakter");
        return false;
      }

      return true;
    }
  </script>
</body>
</html>
HTML

Output:

See the Pen Validasi Email dan Password pada Form login Menggunakan JavaScript by WebbizID (@De-Orchids) on CodePen.

Kode di atas akan melakukan validasi pada input email dan password saat form disubmit. Jika email tidak valid atau password kurang dari 8 karakter, maka akan muncul pesan kesalahan.

Baca juga:

Anda dapat mengubah pesan kesalahan atau aturan validasi sesuai kebutuhan Anda.

Leave a Reply

Your email address will not be published. Required fields are marked *