Ö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ğrulaması için bunları nasıl oluşturacağımızı ve görüntüleyeceğimizi öğrenelim.

Önce, temel bir giriş alanı ve yanına mesajı göstereceğ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 yazı 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

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

Görevin: olay dinleyicisinin içine, giriş değerinin @ sembolünü içerip içermediğini kontrol eden bir if-else ifadesi ekle.

İç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>