Özel hata mesajları

Coddy'nin HTML Journey'sinin JavaScript in Action bölümünün bir parçası — ders 6 / 27.

Özel hata mesajları, kullanıcıların form girişlerindeki sorunun ne olduğunu anlamalarına yardımcı olur. Form doğrulama için bunları nasıl oluşturacağımızı ve görüntüleyeceğimizi öğrenelim.

İlk olarak, temel bir giriş alanı ve mesajı görüntüleyeceğimiz yanındaki bir span oluşturalım:

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

Şimdi, girişi doğrulamak ve özel bir hata mesajı göstermek için JavaScript ekleyelim:

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 = "";
    }
});

Bir kullanıcı giriş alanına yazdığında, olay dinleyici kullanıcı adının en az 5 karakter uzunluğunda olup olmadığını kontrol eder. Eğer değilse, kırmızı bir hata mesajı görüntüler.

Görev

Kolay

E-posta için bir giriş alanı ve altında bir mesaj alanı olan bir sayfamız zaten var.

Göreviniz: olay dinleyicisi (event listener) içinde, giriş değerinin <strong>@</strong> sembolünü içerip içermediğini kontrol eden bir if–else ifadesi eklemektir.

Eğer içeriyorsa → “Looks good!” mesajını gösterin
Aksi takdirde → “Please enter a valid email address” mesajını gösterin

Kendin dene

<!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>