`) oluşturmak.
2. JavaScript Doğrulama: Form gönderildiğinde veya alanlar üzerinde belirli bir olay (örneğin, blur) tetiklendiğinde çalışan bir JavaScript fonksiyonu yazmak. Bu fonksiyon, zorunlu alanların boş olup olmadığını kontrol eder.
3. Hata Mesajlarını Gösterme/Gizleme: Doğrulama başarısız olursa, ilgili hata mesajı yer tutucusunu doldurmak ve görünür hale getirmek. Başarılı olursa, hata mesajını gizlemek.
4. CSS Stil Uygulaması: Hata mesajlarının ve hata içeren giriş alanlarının görsel olarak dikkat çekici olmasını sağlamak için CSS kullanmak.

Anket Formu için HTML Yapısını Oluşturma

>

İlk olarak, basit bir anket formu için gerekli HTML yapısını oluşturalım. Her anket formu alanı için bir `div` içinde `label`, `input` ve hata mesajını gösterecek bir `span` etiketi kullanacağız.

```html

```

Bu yapıda, her `input` elemanının hemen altında bir `span` elemanı bulunmaktadır. Bu `span`, özel hata mesajlarını göstermek için kullanılacaktır. `id` niteliklerini kullanarak JavaScript ile bu elemanlara kolayca erişebileceğiz. `required` özniteliği, tarayıcının varsayılan doğrulama davranışını tetikler, ancak biz bunu JavaScript ile geçersiz kılacak ve kendi mesajlarımızı göstereceğiz.

CSS ile Hata Mesajlarını Şekillendirme

>

Hata mesajlarının görünür ve kullanıcı dostu olması için basit bir CSS stili ekleyelim.

```css
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
}

h1 {
text-align: center;
color: #333;
margin-bottom: 25px;
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}

input:focus,
textarea:focus {
border-color: #007bff;
outline: none;
}

.error-message {
color: #dc3545; /* Kırmızı renk */
font-size: 14px;
margin-top: 5px;
display: none; /* Varsayılan olarak gizli */
}

/* Hata durumundaki inputlar için stil */
input.invalid {
border-color: #dc3545;
}

button {
display: block;
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0056b3;
}
```
Bu CSS, `.error-message` sınıfına sahip elemanları varsayılan olarak gizler (`display: none;`) ve hata oluştuğunda görünür hale getirecek şekilde tasarlanmıştır. Ayrıca, hata içeren `input` elemanlarının kenarlığını kırmızı yapmak için `invalid` sınıfını tanımladık. Bu görsel geri bildirim, frontend geliştirme sürecinde kullanıcıların hatayı hızlıca fark etmesi için kritik öneme sahiptir.

JavaScript ile Doğrulama Mantığını Yazma

>

Şimdi sıra, form doğrulamasını ve özel hata mesajlarını gösterme mantığını içeren JavaScript kodunda.

```javascript
// script.js
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('surveyForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const ageInput = document.getElementById('age');
const feedbackInput = document.getElementById('feedback'); // Geri bildirim alanı zorunlu değil

const nameError = document.getElementById('nameError');
const emailError = document.getElementById('emailError');
const ageError = document.getElementById('ageError');
// feedbackError için hata mesajı göstermeyeceğiz, çünkü zorunlu değil.

// Yardımcı fonksiyon: Hata mesajını gösterir
function showError(element, message, errorSpan) {
element.classList.add('invalid'); // Input'a invalid sınıfı ekle
errorSpan.textContent = message; // Hata mesajını ayarla
errorSpan.style.display = 'block'; // Hata mesajını görünür yap
}

// Yardımcı fonksiyon: Hata mesajını gizler
function hideError(element, errorSpan) {
element.classList.remove('invalid'); // Input'tan invalid sınıfı kaldır
errorSpan.textContent = ''; // Hata mesajını temizle
errorSpan.style.display = 'none'; // Hata mesajını gizle
}

// Form doğrulama ana fonksiyonu
function validateForm() {
let isValid = true; // Formun geçerli olup olmadığını tutan bayrak

// Ad Soyad alanı doğrulaması
if (nameInput.value.trim() === '') {
showError(nameInput, 'Lütfen adınızı ve soyadınızı giriniz.', nameError);
isValid = false;
} else {
hideError(nameInput, nameError);
}

// E-posta alanı doğrulaması
if (emailInput.value.trim() === '') {
showError(emailInput, 'Lütfen e-posta adresinizi giriniz.', emailError);
isValid = false;
} else if (!isValidEmail(emailInput.value.trim())) { // Geçerli e-posta formatı kontrolü
showError(emailInput, 'Lütfen geçerli bir e-posta adresi giriniz.', emailError);
isValid = false;
}
else {
hideError(emailInput, emailError);
}

// Yaş alanı doğrulaması
if (ageInput.value.trim() === '') {
showError(ageInput, 'Lütfen yaşınızı giriniz.', ageError);
isValid = false;
} else if (parseInt(ageInput.value) < 18 || parseInt(ageInput.value) > 99) {
showError(ageInput, 'Yaşınız 18 ile 99 arasında olmalıdır.', ageError);
isValid = false;
}
else {
hideError(ageInput, ageError);
}

return isValid;
}

// E-posta formatı kontrolü için yardımcı regex fonksiyonu
function isValidEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}

// Form gönderildiğinde doğrulama yap
form.addEventListener('submit', function(event) {
event.preventDefault(); // Formun varsayılan gönderimini engelle

if (validateForm()) {
// Tüm alanlar geçerliyse, formu gönderebiliriz.
// Bu kısımda form verilerini sunucuya gönderme işlemi yapılabilir.
alert('Anketiniz başarıyla gönderildi!');
form.reset(); // Formu sıfırla
// Hata mesajlarını da sıfırlayalım (her ihtimale karşı)
hideError(nameInput, nameError);
hideError(emailInput, emailError);
hideError(ageInput, ageError);
} else {
alert('Lütfen tüm zorunlu alanları doğru şekilde doldurunuz.');
}
});

// Opsiyonel: Alanlardan ayrılma (blur) olayında gerçek zamanlı doğrulama
nameInput.addEventListener('blur', () => {
if (nameInput.value.trim() === '') {
showError(nameInput, 'Lütfen adınızı ve soyadınızı giriniz.', nameError);
} else {
hideError(nameInput, nameError);
}
});

emailInput.addEventListener('blur', () => {
if (emailInput.value.trim() === '') {
showError(emailInput, 'Lütfen e-posta adresinizi giriniz.', emailError);
} else if (!isValidEmail(emailInput.value.trim())) {
showError(emailInput, 'Lütfen geçerli bir e-posta adresi giriniz.', emailError);
} else {
hideError(emailInput, emailError);
}
});

ageInput.addEventListener('blur', () => {
if (ageInput.value.trim() === '') {
showError(ageInput, 'Lütfen yaşınızı giriniz.', ageError);
} else if (parseInt(ageInput.value) < 18 || parseInt(ageInput.value) > 99) {
showError(ageInput, 'Yaşınız 18 ile 99 arasında olmalıdır.', ageError);
} else {
hideError(ageInput, ageError);
}
});
});
```

Bu JavaScript kodunda şunlar yapılır:

* `DOMContentLoaded`: HTML belgesi tamamen yüklendiğinde kodun çalışmasını sağlar.
* Eleman Seçimi: `document.getElementById()` kullanarak form, giriş alanları ve hata mesajı `span` elemanlarına referanslar alınır.
* `showError()` ve `hideError()`: Bu yardımcı fonksiyonlar, belirli bir giriş alanının durumunu (geçerli/geçersiz) ve ilgili hata mesajının görünürlüğünü yönetir. `classList.add('invalid')` ile CSS'teki kırmızı kenarlık stilini uygularız.
* `validateForm()`: Bu ana fonksiyon, her zorunlu alanı tek tek kontrol eder. `trim()` metodu, başındaki ve sonundaki boşlukları temizleyerek sadece içeriği kontrol etmemizi sağlar. Koşullara göre uygun özel hata mesajını `showError` ile gösterir.
* `isValidEmail()`: E-posta formatının doğru olup olmadığını kontrol eden basit bir düzenli ifade (regex) fonksiyonu.
* Form Gönderimini Yakalama: `form.addEventListener('submit', function(event) { ... });` ile form gönderim olayını dinleriz. `event.preventDefault()` ile tarayıcının varsayılan form gönderimini durdururuz, böylece kendi JavaScript doğrulama mantığımızı uygulayabiliriz.
* Gerçek Zamanlı Doğrulama (Opsiyonel): `blur` olay dinleyicileri ekleyerek, kullanıcı bir alandan ayrıldığında (tab tuşuyla veya tıklayarak) anında doğrulama yapılmasını sağlarız. Bu, kullanıcı deneyimi (UX) açısından oldukça önemlidir, çünkü kullanıcı hatalarını anında fark edebilir. Daha fazla bilgi için "JavaScript Form Doğrulama İçin En İyi Uygulamalar" başlıklı makalemize göz atabilirsiniz.

Adım Adım Uygulama Kılavuzu

>

Yukarıdaki kod parçacıklarını bir araya getirerek, basit bir JavaScript anketinde zorunlu alanlar için özel hata mesajlarını nasıl göstereceğinizi adım adım uygulayalım:

1. HTML Anket Yapısını Hazırlayın

>

Yukarıda gösterilen `index.html` dosyasını oluşturun ve `form` etiketinin içindeki her `input` elemanı için, hata mesajını gösterecek bir `span` elemanının bulunduğundan emin olun. `id` nitelikleri, JavaScript'te bu elemanlara erişmek için kritik öneme sahiptir.

```html

```
Bu yapı, hata mesajlarının ilgili alanın hemen altında, okunaklı bir şekilde görünmesini sağlar.

2. CSS Stil Dosyasını Oluşturun

>

`style.css` dosyasını oluşturun ve yukarıdaki CSS kodunu yapıştırın. Bu stil dosyası, hem genel form düzenini hem de hata mesajlarının (kırmızı metin, gizli başlangıç) ve hatalı giriş alanlarının (kırmızı kenarlık) görsel görünümünü yönetir. Hata mesajlarının `display: none;` ile başlaması, yalnızca hata olduğunda görünmelerini garanti eder.

3. JavaScript Doğrulama Fonksiyonunu Yazın

>

`script.js` dosyasını oluşturun ve yukarıdaki JavaScript kodunu yapıştırın. Bu kod, JavaScript form doğrulama mantığının kalbidir.

* Eleman Referansları: `nameInput`, `emailInput`, `ageInput` gibi değişkenlerle form elemanlarına erişin. Benzer şekilde `nameError`, `emailError`, `ageError` ile hata mesajı `span`'larına erişim sağlayın.
* `showError` ve `hideError`: Bu fonksiyonların, `classList.add/remove('invalid')` kullanarak input alanına sınıf ekleyip çıkarması ve hata `span`'ının `textContent`'unu ayarlayıp `display` stilini değiştirmesi, DOM manipülasyonunun etkili bir örneğidir.
* `validateForm` İçeriği: Her bir zorunlu alan için ayrı ayrı `if` koşulları yazın. Örneğin, `nameInput.value.trim() === ''` ile ad alanının boş olup olmadığını kontrol edin. E-posta için `isValidEmail` gibi ek kontroller de ekleyin. Bu kontroller, anket formunun veri bütünlüğünü sağlar.

```javascript
// script.js dosyasından ilgili kısım
if (nameInput.value.trim() === '') {
showError(nameInput, 'Lütfen adınızı ve soyadınızı giriniz.', nameError);
isValid = false;
} else {
hideError(nameInput, nameError);
}
// Diğer alanlar için de benzer mantık uygulanır.
```

4. Form Gönderme Olayını Yakalayın

>

`form.addEventListener('submit', ...)` kullanarak formun gönderilmesi durumunda `validateForm()` fonksiyonunu çağırın. `event.preventDefault()` unutmayın, aksi takdirde tarayıcı kendi doğrulamasını yapar ve sayfa yenilenir.

```javascript
// script.js dosyasından ilgili kısım
form.addEventListener('submit', function(event) {
event.preventDefault(); // Varsayılan gönderimi engelle
if (validateForm()) {
alert('Anketiniz başarıyla gönderildi!');
form.reset();
// Hata mesajlarını da gizle
hideError(nameInput, nameError);
hideError(emailInput, emailError);
hideError(ageInput, ageError);
} else {
alert('Lütfen tüm zorunlu alanları doğru şekilde doldurunuz.');
}
});
```

5. Gelişmiş Özellikler ve Kullanıcı Deneyimi İpuçları

>

* Gerçek Zamanlı Doğrulama: Kullanıcıların bir alandan ayrıldığında veya yazdıkça hata mesajlarını görmelerini sağlamak için `blur` veya `input` olay dinleyicilerini kullanın. Bu, kullanıcı deneyimi (UX) açısından çok değerlidir. Yukarıdaki `script.js` örneğinde `blur` olayları zaten eklenmiştir.
* Hata Mesajlarını Temizleme: Form başarıyla gönderildiğinde veya kullanıcı hataları düzelttiğinde hata mesajlarının ve hatalı stilin kaldırıldığından emin olun. `hideError` fonksiyonu bu işi yapar.
* Erişilebilirlik: `aria-live` gibi ARIA niteliklerini kullanarak, ekran okuyucuların dinamik olarak ortaya çıkan hata mesajlarını okumasını sağlayabilirsiniz. Bu, web erişilebilirliği standartlarına uygunluk için önemlidir. "Modern Web Uygulamalarında Kullanıcı Geri Bildirimini Artırma" başlıklı makalemiz, bu konuda daha detaylı bilgiler sunmaktadır.

En İyi Uygulamalar ve Dikkate Alınması Gerekenler

>

* Sunucu Taraflı Doğrulama: JavaScript ile yapılan doğrulama (istemci taraflı doğrulama), kullanıcı deneyimi (UX) için harikadır, ancak güvenlik açısından asla tek başına yeterli değildir. Kötü niyetli kullanıcılar istemci tarafındaki JavaScript'i kolayca atlayabilir. Bu nedenle, form verileri sunucuya gönderildiğinde mutlaka sunucu tarafında da doğrulama yapılmalıdır.
* Karmaşık Doğrulama Kuralları: Telefon numarası formatı, güçlü şifre gereksinimleri veya benzersiz kullanıcı adları gibi daha karmaşık doğrulama kuralları için düzenli ifadeleri (regex) veya özel JavaScript fonksiyonlarını kullanmaktan çekinmeyin.
* Modüler Kod Yapısı: Daha büyük formlar veya çok sayıda alan içeren uygulamalar için, doğrulama mantığınızı daha küçük, yeniden kullanılabilir fonksiyonlara veya modüllere ayırmayı düşünün. Bu, kodunuzu daha yönetilebilir ve sürdürülebilir hale getirir. Bu, genel frontend geliştirme prensiplerinden biridir.

Sonuç

>

Basit bir JavaScript anketinde zorunlu alanlar için özel hata mesajlarını göstermek, sadece teknik bir gereklilik değil, aynı zamanda kullanıcı deneyimi (UX) açısından da hayati bir adımdır. Bu rehberde sunduğumuz adım adım yaklaşımla, ziyaretçilerinizin formlarınızı daha kolay ve hatasız bir şekilde doldurmasını sağlayabilirsiniz. JavaScript form doğrulama tekniklerini etkili bir şekilde kullanarak, web sitenizin kullanıcı dostluğunu artırır, topladığınız verilerin kalitesini yükseltir ve Google AdSense gibi platformların "Düşük Değerli İçerik" algısından uzak, değerli ve işlevsel bir içerik sunmuş olursunuz. Unutmayın, iyi tasarlanmış bir hata mesajı, kullanıcının kafasını karıştırmak yerine, ona doğru yolu gösteren bir rehber gibidir.