Pesan error khusus

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 6 dari 27.

Pesan error khusus membantu pengguna memahami masalah pada input formulir mereka. Mari pelajari cara membuat dan menampilkannya untuk validasi formulir.

Pertama, mari kita buat field input dasar dan sebuah span di sebelahnya, tempat kita akan menampilkan pesan:

<input type="text" id="username" placeholder="Enter username">
<span id="usernameError" class="error"></span>

Sekarang, mari tambahkan JavaScript untuk memvalidasi input dan menampilkan pesan error khusus:

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    if (this.value.length < 5) {
        usernameError.textContent = "Username must be at least 5 characters long";
        usernameError.style.color = "red";
    } else {
        usernameError.textContent = "";
    }
});

Saat pengguna mengetik di kolom input, event listener memeriksa apakah nama pengguna memiliki panjang minimal 5 karakter. Jika tidak, event listener menampilkan pesan error berwarna merah.

Tantangan

Mudah

Kita sudah memiliki halaman dengan kolom input untuk email dan area pesan di bawahnya.

Tugasmu: di dalam event listener, tambahkan pernyataan if-else yang memeriksa apakah nilai input menyertakan @ simbol.

Jika ya → tampilkan pesan “Looks good!”
Jika tidak → tampilkan pesan “Please enter a valid email address”

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <title>Custom error messages</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="form-container">
    <h2>Create Your Account</h2>
    <p class="subtitle">Join our newsletter for the latest updates</p>

    <form>
      <label for="email">Email Address</label>
      <input type="text" id="email" placeholder="e.g. user@example.com">
      <span id="emailError" class="message"></span>

      <button type="button">Subscribe</button>
    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>