JavaScript ile Form Doğrulama (Boş Alan Kontrolü)
Form doğrulama, kullanıcı deneyiminin en kritik aşamalarından biridir. Kullanıcı formu göndermeden önce boş alanları kontrol ederek hem hataları önler hem de backend tarafındaki yükü azaltır. Aşağıdaki örnekte saf JavaScript kullanarak basit bir “boş alan kontrolü” yapıyoruz. Bu yapı, kayıt formlarından iletişim sayfalarına kadar her sitede kullanılabilir.
<form id="iletisimFormu">
<input id="ad" placeholder="Adınızı girin">
<input id="email" placeholder="E-posta adresiniz">
<button type="submit">Gönder</button>
</form>
<script>
document.getElementById("iletisimFormu").addEventListener("submit", (e) => {
const ad = document.getElementById("ad").value.trim();
const email = document.getElementById("email").value.trim();
if (ad === "" || email === "") {
alert("Lütfen tüm alanları doldurun.");
e.preventDefault(); // Formu gönderme
return;
}
alert("Form başarıyla gönderildi!");
});
</script>Kod Açıklaması
Form doğrulama, kullanıcı deneyiminin en kritik aşamalarından biridir.
Kullanıcı formu göndermeden önce boş alanları kontrol ederek hem hataları önler hem de backend tarafındaki yükü azaltır.
Aşağıdaki örnekte saf JavaScript kullanarak basit bir “boş alan kontrolü” yapıyoruz.
Bu yapı, kayıt formlarından iletişim sayfalarına kadar her sitede kullanılabilir.
Nasıl Çalışır?
Bu kod örneği, Web Speech API kullanılarak sesli olarak açıklanmaktadır. Kod bloğunun üzerine mouse ile geldiğinizde otomatik olarak açıklama başlar.
Kullanım Alanları
Web Speech API
Bu kod örneği Web Speech API kullanılarak sesli olarak açıklanmaktadır.
İlgili Kodlar
// ZebifyTech Konuşan Kodlar'a Hoş Geldiniz 🎙️
// Bu örnek, dinamik bir karşılama mesajı oluşturur.
const platform = "ZebifyTech";
const bolum = "Konuşan Kodlar";
function hosGeld...ZebifyTech Konuşan Kodlar’a Hoş Geldiniz
<style>
#modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
justify-content: center;
align-items: center;
}
.icerik {
background...JavaScript ile Modal Pencere Oluşturma
Kendi Konuşan Kodunuzu Oluşturun
Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.