Kaleminize güveniyorsanız, bloğumuzda özgürce web, hosting, teknoloji ve programlama dilleri üzerine makale yazabilirsiniz. Bizde sizi sürekli hediye kuponlar ile ödüllendiririz.
Blog Yaz!Form doğrulama, kullanıcıdan gelen verilerin geçerli ve eksiksiz olmasını sağlamak için gereklidir. Bu makalede, 'JavaScript form doğrulama', 'form validasyonu', 'web form kodları' ve 'form doğrulama örneği' anahtar kelimeleri çerçevesinde JavaScript kullanarak form doğrulama sürecini adım adım ve örnek kodlarla açıklayacağız.
Form doğrulama işlemine başlamadan önce, doğrulayacağımız formu oluşturmamız gerekiyor. Aşağıda basit bir HTML form örneği verilmiştir:
<!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 Örneği</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<form id="contactForm">
<h2>İletişim Formu</h2>
<div>
<label for="name">Ad:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">Mesaj:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div>
<button type="submit">Gönder</button>
</div>
</form>
<div id="errorMessages"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Formun HTML yapısını oluşturduktan sonra, JavaScript kullanarak form doğrulama işlemini gerçekleştirebiliriz. İlk olarak, formun submit olayını dinleyerek doğrulama işlemini başlatacağız.
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault();
validateForm();
});
function validateForm() {
let errors = [];
// Ad doğrulama
const name = document.getElementById('name').value;
if (name === '') {
errors.push('Ad alanı boş bırakılamaz.');
}
// Email doğrulama
const email = document.getElementById('email').value;
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
errors.push('Geçerli bir email adresi girin.');
}
// Mesaj doğrulama
const message = document.getElementById('message').value;
if (message === '') {
errors.push('Mesaj alanı boş bırakılamaz.');
}
displayErrors(errors);
}
function displayErrors(errors) {
const errorContainer = document.getElementById('errorMessages');
errorContainer.innerHTML = '';
if (errors.length > 0) {
errors.forEach(error => {
const errorElement = document.createElement('div');
errorElement.className = 'error';
errorElement.innerText = error;
errorContainer.appendChild(errorElement);
});
} else {
errorContainer.innerHTML = 'Form başarıyla gönderildi!';
}
}
Hata mesajlarını kullanıcıya göstermenin yanı sıra, formun kullanımını kolaylaştırmak için bazı ipuçları ve stil eklemek de önemlidir. Kullanıcı dostu hata mesajları ve görsel bildirimler, form doğrulamasını daha etkili hale getirebilir.
Aşağıdaki CSS kodu ile hata mesajlarına stil verebiliriz:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
form div {
margin-bottom: 15px;
}
.error {
color: red;
font-size: 14px;
}
#successMessage {
color: green;
}
JavaScript fonksiyonunda displayErrors fonksiyonunu kullanarak hata mesajlarını kullanıcıya gösterebiliriz.
function displayErrors(errors) {
const errorContainer = document.getElementById('errorMessages');
errorContainer.innerHTML = '';
if (errors.length > 0) {
errors.forEach(error => {
const errorElement = document.createElement('div');
errorElement.className = 'error';
errorElement.innerText = error;
errorContainer.appendChild(errorElement);
});
} else {
errorContainer.innerHTML = '<div id="successMessage">Form başarıyla gönderildi!</div>';
}
}
Yukarıda verilen HTML, CSS ve JavaScript kodlarıyla basit bir form doğrulama işlemi gerçekleştirdik. Bu form, kullanıcıdan ad, email ve mesaj bilgilerini alarak bu bilgilerin doğruluğunu kontrol eder. Hatalı veya eksik bilgi girişi durumunda kullanıcıya uygun hata mesajları gösterilir.
<!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 Örneği</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<form id="contactForm">
<h2>İletişim Formu</h2>
<div>
<label for="name">Ad:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">Mesaj:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div>
<button type="submit">Gönder</button>
</div>
</form>
<div id="errorMessages"></div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
form div {
margin-bottom: 15px;
}
.error {
color: red;
font-size: 14px;
}
#successMessage {
color: green;
}
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault();
validateForm();
});
function validateForm() {
let errors = [];
// Ad doğrulama
const name = document.getElementById('name').value;
if (name === '') {
errors.push('Ad alanı boş bırakılamaz.');
}
// Email doğrulama
const email = document.getElementById('email').value;
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
errors.push('Geçerli bir email adresi girin.');
}
// Mesaj doğrulama
const message = document.getElementById('message').value;
if (message === '') {
errors.push('Mesaj alanı boş bırakılamaz.');
}
displayErrors(errors);
}
function displayErrors(errors) {
const errorContainer = document.getElementById('errorMessages');
errorContainer.innerHTML = '';
if (errors.length > 0) {
errors.forEach(error => {
const errorElement = document.createElement('div');
errorElement.className = 'error';
errorElement.innerText = error;
errorContainer.appendChild(errorElement);
});
} else {
errorContainer.innerHTML = '<div id="successMessage">Form başarıyla gönderildi!</div>';
}
}
JavaScript ile form doğrulama işlemi, web formlarının güvenli ve kullanıcı dostu olmasını sağlar. Bu makalede, 'JavaScript form doğrulama', 'form validasyonu', 'web form kodları' ve 'form doğrulama örneği' anahtar kelimeleri çerçevesinde form doğrulama sürecini adım adım inceledik. Bu bilgiler ve örnek kodlar ile kendi projelerinizde form doğrulama işlemlerini kolayca uygulayabilirsiniz.
Lisans Yönetim Scripti 2
Canlı Radyo Dark Scripti
Canlı Radyo Light Scripti
Rüzgar Radyo Scripti
Radyo Minimal
Ekitap Scripti
Aşk Sevgililer GünüEvlilik
Sohbet Scripti
Dialog Whatsapp Benzeri Sohbet
Firebase Chat
Web Ajans Scripti
Ajans Scripti Kolay Kullanım
Ajans Scripti V2
Ajans Scripti V3
Avukat Ve Hukuk Bürosu Scripti
Avukat Ve Hukuk Bürosu Web Tasarım V2
Mobil Uyumlu Çilingir Scripti
Kuaför Güzellik Salonu Spa Merkezi Web Tasarım
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2
İlaçlama Şirketi Web Tasarımı
İlan Web Tasarımı
İlan Web Tasarımı V2
İnşaat Firması Web Tasarımı
İnşaat Firması Tasarımı V2
Kitapçı Kırtasiye Web Tasarımı
Kombi Klima Servisi Web Tasarımı
Korku Evi Eğlence Mekanı Web Tasarımı
Kurumsal Firma Web Tasarımı V2
Kurumsal Firma Web Tasarımı V3
Ajans Web Tasarımı V4
Kurumsal Firma Web Tasarımı V4
Kurumsal Firma Web Tasarımı V5
Kurumsal Firma Web Tasarımı V6
Kurumsal Firma Web Tasarımı V7
Kurumsal Firma Web Tasarımı V8
Mobilya Dekorasyon Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı V2
Nakliyat Taşımacılık Web Tasarımı V3
Ana Okulu Ve Kreş Web Tasarımı
Otel Pansiyon Web Tasarımı
Özel Oto Servis Web Tasarımı
Rent A Car Araç Kiralama Web Tasarımı
Rent A Car Araç Kiralama Web Tasarımı V2
Restaurant Cafe Bar Lokanta Web Tasarımı
Restaurant Cafe Bar Lokanta Web Tasarımı V2
Teknik Servis Web Tasarımı
Sigorta Acenta Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı V2
Sürücü Kursu Web Tasarımı
Tek Ürün Satış Web Tasarımı
Tek Ürün Satış Web Tasarımı V2
Tek Ürün Yaprak Web Tasarımı
Tek Ürün Yaprak Web Tasarımı V2
Tek Ürün Satış Web Tasarımı V3
Temizlik Şirketi Web Tasarımı
Temizlik Şirketi Web Tasarımı V2
Ajans Web Tasarımı V5
Ajans Web Tasarımı V6
Werock Radyo Web Tasarımı
Avukat Ve Hukuk Bürosu Tasarımı V3
Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3
İnşaat Firması Web Tasarımı V3
Kurumsal Firma Web Tasarımı V9
Mimarlık Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı V4
Ana Okulu Ve Kreş Web Tasarımı V2
Psikolog Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı V3
Sürücü Kursu Web Tasarımı V2
Teknik Servis Web Tasarımı V3
Ajans Web Tasarımı V7
Google Indexing Api
Milando Radyo Wordpress Teması
Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.
