JavaScript ile Form Doğrulama (Validation - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

Nefret · 09 Mayıs 2025, 00:38

Merhaba,
Basit bir iletişim formu üzerinden JavaScript ile form doğrulama (validation) işlemini örnekledim.
Kullanıcı ad ve e-posta alanlarını kontrol ediyoruz. Hatalı veya eksik giriş varsa uyarı gösteriliyor.
Bu yöntem, kullanıcı deneyimi ve veri güvenliği açısından oldukça önemlidir.
Daha gelişmiş sürümünde RegEx (düzenli ifadeler) veya sunucu tarafı kontroller de eklenebilir.
Geri bildirimlerinizi bekliyorum!

Kod: Kodu kopyalamak için üzerine çift tıklayın!

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Doğrulama</title>
  <style>
    body {
      font-family: sans-serif;
      background: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    form {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    input, button {
      display: block;
      width: 100%;
      margin-bottom: 15px;
      padding: 10px;
      font-size: 16px;
    }

    .error {
      color: red;
      font-size: 14px;
      margin-top: -10px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <form id="form">
    <input type="text" id="name" placeholder="Adınız">
    <div class="error" id="nameError"></div>

    <input type="email" id="email" placeholder="E-posta">
    <div class="error" id="emailError"></div>

    <button type="submit">Gönder</button>
  </form>

  <script>
    document.getElementById("form").addEventListener("submit", function(e) {
      e.preventDefault();

      let hasError = false;

      const nameInput = document.getElementById("name");
      const emailInput = document.getElementById("email");
      const nameError = document.getElementById("nameError");
      const emailError = document.getElementById("emailError");

      nameError.textContent = "";
      emailError.textContent = "";

      if (nameInput.value.trim() === "") {
        nameError.textContent = "İsim boş bırakılamaz.";
        hasError = true;
      }

      if (!emailInput.value.includes("@") || emailInput.value.trim() === "") {
        emailError.textContent = "Geçerli bir e-posta giriniz.";
        hasError = true;
      }

      if (!hasError) {
        alert("Form başarıyla gönderildi!");
        // Normalde burada sunucuya veri gönderilir
        nameInput.value = "";
        emailInput.value = "";
      }
    });
  </script>
</body>
</html>

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
C SHARP – FORM APPLİCATİON GİRİŞ EKRANI (LOGİN FORM)	Kaf_Dağı	C#	0	20 Mart 2016 15:30
Tabsheet içinde form açmak (Tabbed Form)	Kaf_Dağı	Delphi	0	18 Mart 2015 14:12
Tarih validation doğrulama işlemi	hAte	HTML/CSS/JavaScript	0	16 Ekim 2014 15:20
Tarih validation doğrulama işlemi	hAte	HTML/CSS/JavaScript	0	10 Ekim 2014 03:51

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

Etiketlenen Kullanıcılar
Etiketlemek istediğiniz kullanıcılar arasına virgül koyunuz. Örnek: nokta,sukunet,NucLear

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.