Meydan okuma - Form ve depolama
Form doğrulama, localStorage ve JSON ile bir iletişim formu yazarsın.
İletişim formu işleyici
Bu meydan okumada iletişim formu yazacaksın. Form gönderildiğinde preventDefault ile sayfa yenilenmesini engeller, alanları okur ve doğrularsın.
Doğrulama basit: ad ve mesaj boşsa hata gösterilir. Geçerliyse ad localStorage.setItem ile tarayıcıda saklanır; sayfa yenilense bile kaybolmaz.
Saklama anahtarı bir dizedir, değer de yine dize. Bu yüzden basit veriler için setItem yeterlidir.
Değerleri oku ve doğrula
Form alanlarına erişmek için .value özelliğini kullanırsın. Ad ve mesaj boş dize ise doğrulama başarısız olur; hata öğesine mesaj yazarsın.
Doğrulama geçerse adı localStorage.setItem('contactName', name) ile saklarsın. Hata öğesini de boşaltırsın ki eski hata kalmasın.
İpucu: setItem her değeri dizeye çevirir. Bu yüzden basit metinler için idealdir.
Uygulama handleSubmit fonksiyonunu yaz
handleSubmit(event) fonksiyonunu yaz. Önce event.preventDefault() çağır. nameInput.value ve messageInput.value ile ad ve mesajı oku. Biri boş dize ise errorEl.textContent'e hata yaz ve dön. İkisi de doluysa localStorage.setItem('contactName', name) ile adı sakla ve errorEl.textContent'i boş dize yap.
Örnek çözümü göster
function handleSubmit(event) aç. event.preventDefault() çağır. nameInput.value ve messageInput.value oku. Biri boşsa errorEl.textContent = '...' yap ve return. Değilse localStorage.setItem('contactName', name) çağır ve errorEl.textContent = '' yap.
Örnek çözüm:
function handleSubmit(event) {
event.preventDefault();
const name = nameInput.value;
const message = messageInput.value;
if (name === '' || message === '') {
errorEl.textContent = 'Tüm alanları doldurun';
return;
}
localStorage.setItem('contactName', name);
errorEl.textContent = '';
}Kendini test et
-
Form gönderimini JS ile yönetmek için ilk adım ne?
- Formu HTML'den silmek
- submit olayında preventDefault çağırmak
- sayfayı yenilemek
- input'ları gizlemek
Cevabı göster
submit olayında preventDefault çağırmak — Doğru. preventDefault varsayılan sayfa yenilenmesini engeller, JS kontrolü alır.
-
Adı yerel depolamaya kaydet
function handleSubmit(event) { event.preventDefault(); const name = nameInput.value; localStorage.____; errorEl.textContent = ''; }Cevabı göster
function handleSubmit(event) { event.preventDefault(); const name = nameInput.value; localStorage.setItem('contactName', name); errorEl.textContent = ''; }