Validasi input

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 5 dari 27.

Saat membuat formulir, penting untuk memberikan umpan balik langsung kepada pengguna saat mereka mengetik, agar mereka tidak mengirimkan informasi yang salah. Ini disebut validasi waktu nyata.

Pertama, mari buat kolom input teks dasar. Kita ingin memeriksa apakah panjang nama pengguna minimal 5 karakter.

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

Sekarang, tambahkan event listener untuk memvalidasi input saat pengguna mengetik:

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

usernameInput.addEventListener('input', function() {
    // Ambil nilai saat ini
    const value = this.value;
    
    // Periksa apakah nilainya memenuhi kriteria kita
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

Batas berubah menjadi merah jika nama pengguna kurang dari 5 karakter dan hijau jika valid.

Tantangan

Mudah

Kita memiliki halaman dengan kolom input email. Saat ini, halaman tersebut tidak memvalidasi format email.

Tugasmu adalah melengkapi baris di dalam blok if yang sudah ada agar:

Saat email berisi "@",
Border input berubah menjadi "2px solid rgb(0, 250, 0)".

Coba sendiri

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