Girdi doğrulama

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

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

Öncelikle 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 girdiyi doğrulamak için bir olay dinleyicisi ekleyin:

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

usernameInput.addEventListener('input', function() {
    // Geçerli 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 kısaysa kenarlık kırmızı, geçerliyse yeşil olur.

Görev

Kolay

Elimizde e-posta giriş alanı bulunan bir sayfa var. Şu anda e-posta biçimini doğrulamıyor.

Görevin, mevcut if bloğunun içindeki satırı tamamlamak, böylece:

E-posta "@" içerdiğinde,
Giriş alanının 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>