img
Javascript İle Basit Bir Form Doğrulama

Javascript İle Basit Bir Form Doğrulama

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.

HTML ile Form Oluşturma

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>

JavaScript ile Form Doğrulama

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ı ve İpuçları

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.

CSS ile Hata Mesajları Stil Verme

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;
}

Hata Mesajlarının Kullanıcıya Gösterilmesi

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>';
    }
}

Örnek Kod ve Uygulama

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.

Tam Kod

<!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.

İlk Yorumu Yapan Sen Ol!

Web Tasarımlar

  • Lisans Yönetim Scripti 2

    20.6K
    1000.00₺
  • Canlı Radyo Dark Scripti

    13.2K
    1000.00₺
  • Canlı Radyo Light Scripti

    7.9K
    1000.00₺
  • Rüzgar Radyo Scripti

    8.1K
    0.00₺
  • Radyo Minimal

    3.9K
    1000.00₺
  • Ekitap Scripti

    6K
    3000.00₺
  • Aşk Sevgililer GünüEvlilik

    7.5K
    1000.00₺
  • Sohbet Scripti

    7.6K
    0.00₺
  • Dialog Whatsapp Benzeri Sohbet

    4.6K
    0.00₺
  • Firebase Chat

    3.7K
    0.00₺
  • Web Ajans Scripti

    23.9K
    3000.00₺
  • Ajans Scripti Kolay Kullanım

    2.9K
    1000.00₺
  • Ajans Scripti V2

    3K
    1000.00₺
  • Ajans Scripti V3

    3K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Scripti

    2K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Web Tasarım V2

    2.6K
    1000.00₺
  • Mobil Uyumlu Çilingir Scripti

    1.9K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    2.6K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    2.2K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    39.3K
    1000.00₺
  • İlaçlama Şirketi Web Tasarımı

    5.2K
    1000.00₺
  • İlan Web Tasarımı

    2.2K
    1000.00₺
  • İlan Web Tasarımı V2

    2.2K
    1500.00₺
  • İnşaat Firması Web Tasarımı

    1.9K
    1000.00₺
  • İnşaat Firması Tasarımı V2

    2K
    1000.00₺
  • Kitapçı Kırtasiye Web Tasarımı

    2.5K
    1000.00₺
  • Kombi Klima Servisi Web Tasarımı

    2.2K
    1000.00₺
  • Korku Evi Eğlence Mekanı Web Tasarımı

    2.2K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V2

    3.3K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V3

    3.3K
    1000.00₺
  • Ajans Web Tasarımı V4

    2.4K
    1500.00₺
  • Kurumsal Firma Web Tasarımı V4

    2.9K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V5

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V6

    3.1K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V7

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V8

    3K
    1000.00₺
  • Mobilya Dekorasyon Web Tasarımı

    2.6K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı

    2.1K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V2

    2.4K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V3

    2.6K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı

    2.3K
    1000.00₺
  • Otel Pansiyon Web Tasarımı

    2.3K
    1000.00₺
  • Özel Oto Servis Web Tasarımı

    2.1K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı

    5.9K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı V2

    3.2K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı

    2.7K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı V2

    2.6K
    1000.00₺
  • Teknik Servis Web Tasarımı

    2.7K
    1000.00₺
  • Sigorta Acenta Web Tasarımı

    2.2K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı

    2.1K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V2

    2.6K
    1000.00₺
  • Sürücü Kursu Web Tasarımı

    2.8K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı

    2.9K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı V2

    2.6K
    1000.00₺
  • Tek Ürün Yaprak Web Tasarımı

    2.4K
    1100.00₺
  • Tek Ürün Yaprak Web Tasarımı V2

    2.7K
    1100.00₺
  • Tek Ürün Satış Web Tasarımı V3

    2.6K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı

    2.7K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı V2

    2.7K
    1000.00₺
  • Ajans Web Tasarımı V5

    3K
    1000.00₺
  • Ajans Web Tasarımı V6

    4.2K
    1000.00₺
  • Werock Radyo Web Tasarımı

    4.1K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Tasarımı V3

    1.4K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    1.4K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    5.3K
    1000.00₺
  • İnşaat Firması Web Tasarımı V3

    1.4K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V9

    1.5K
    1000.00₺
  • Mimarlık Web Tasarımı

    1.3K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V4

    1.5K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı V2

    1.4K
    1000.00₺
  • Psikolog Web Tasarımı

    1.5K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V3

    1.7K
    1200.00₺
  • Sürücü Kursu Web Tasarımı V2

    1.7K
    1000.00₺
  • Teknik Servis Web Tasarımı V3

    2K
    1000.00₺
  • Ajans Web Tasarımı V7

    1.6K
    900.00₺
  • Google Indexing Api

    319
    500.00₺
  • Milando Radyo Wordpress Teması

    247
    1000.00₺

Vip Tema Web Ajans Yazılımı

Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.

  • PAYTR Ödeme Entegrasyonu
  • SHIPY Ödeme Entegrasyonu
  • WHM Hosting Satış Entegrasyonu
  • Domain Sorgulama/Satış Entegrasyonu
  • Google Authenticator
  • SMS 2 Faktörlü Doğrulama
  • Net Gsm SMS Entegrasyonu
  • İleti Merkezi SMS Entegrasyonu
  • İnteraktif SMS Entegrasyonu
  • Mas GSM SMS Entegrasyonu
img