Özel hata mesajları

Coddy'nin HTML Journey'sinin JavaScript Eylemde bölümünün bir parçası. Ders 6 / 27.

Özel hata mesajları, kullanıcıların form girdilerinde neyin yanlış olduğunu anlamalarına yardımcı olur. Form doğrulama için bunların nasıl oluşturulacağını ve görüntüleneceğini öğrenelim.

Öncelikle, temel bir giriş alanı ve yanına, mesajı görüntüleyeceğimiz bir span oluşturalım:

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

Şimdi, girdiyi 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 = "";
    }
});

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

Görev

Kolay

Zaten e-posta için bir giriş alanı ve bunun altında bir mesaj alanı bulunan bir sayfamız var.

Görevin: olay dinleyicisinin içinde, giriş değerinin <strong>@</strong> sembolünü içerip içermediğini kontrol eden bir if-else ifadesi eklemek.

İçeriyorsa → “Looks good!” mesajını göster
Aksi takdirde → “Please enter a valid email address” mesajını göster

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>