Latihan 2: Form Lanjutan — React

Latihan 2 dari materi Form Lanjutan di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Tambahkan validasi yang jalan sambil mengetik. Kode awal sudah punya state email dan password serta dua kolom controlled, <input id="email"> dan <input id="password" type="password">. Biarkan semuanya.

  1. Tepat di bawah kolom email, tampilkan <span id="email-error">Email harus mengandung @</span> selama isiannya belum memuat @. Periksa dengan email.includes("@").
  2. Tepat di bawah kolom password, tampilkan <span id="password-error">Password minimal 6 karakter</span> selama panjangnya kurang dari 6. Periksa dengan password.length < 6.
  3. Tampilkan keduanya dengan syarat && <span>...</span>, supaya span-nya hilang dari halaman begitu isiannya sah, bukan disembunyikan dengan CSS. Pemeriksaannya di render, bukan saat form dikirim.

Yang dicek: #email, #password, dan #email-error ada saat halaman pertama tampil (email masih kosong). Setelah [email protected] diketik di #email, #email-error hilang. #password-error juga tampil saat itu (password masih kosong), masih tampil setelah abc12 (5 karakter) diketik di #password, dan hilang setelah abc123 (6 karakter) atau rahasiaku123 diketik. Kodenya juga harus memuat useState(, onChange, pemeriksaan karakter seperti includes(, dan perbandingan panjang dengan 6 seperti length < 6.

Hint