Girdi doğrulama

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

Formlar oluştururken, kullanıcıların hatalı bilgi göndermemeleri için yazarken onlara anında geri bildirim vermek önemlidir. Buna gerçek zamanlı doğrulama denir.

İlk olarak, temel bir metin giriş alanı oluşturalım. Kullanıcı adı uzunluğunun en az 5 karakter olup olmadığını kontrol etmek istiyoruz.

<input type="text" id="username" placeholder="Enter username">

Şimdi, kullanıcı yazarken girişi doğrulamak için bir olay dinleyicisi (event listener) ekleyin:

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

usernameInput.addEventListener('input', function() {
    // Mevcut değeri al
    const value = this.value;
    
    // Kriterlerimizi karşılayıp karşılamadığını kontrol et
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

Kullanıcı adı 5 karakterden azsa kenarlık kırmızı, geçerliyse yeşil olur.

Görev

Kolay

E-posta giriş alanı olan bir sayfamız var. Şu anda e-posta formatını doğrulamıyor.

Göreviniz, mevcut <strong>if</strong> bloğu içindeki satırı tamamlamaktır, böylece:

E-posta "@" içerdiğinde,
Girişin kenarlığı "2px solid rgb(0, 250, 0)" olur.

Kendin dene

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

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