jQuery ile Form Kontrolü Nasıl Yapılır?
14 Haziran 2017

jQuery ile Form Kontrolü Nasıl Yapılır?

HTML Form formatı sayesinde birçok veriyi rahatlıkla veri tabanlarına veya farklı dosyalara kayıt etmemizi sağlayabiliriz, bunun haricinde herhangi bir internet kullanıcısının da HTML formlarını kullanması konusunda oldukça bir kolaylık olduğunu unutmamalıyız. Bugün ise gelişen web dünyasında sıkça karşılaşmış olduğumuz olaylardan biri olan jQuery ile form kontrolü hakkında bir örnek hazırlamak istedim. Bu örnek sayesinde, formu kullanan kullanıcı girmiş olduğu verilerden herhangi biri eksik veya yanlış ise ona jQuery ile birlikte uyarı mesajı gönderebiliriz. Peki, jQuery ile form kontrolü nasıl yapılır?

İlk etapta basit bir forma sahip olan bir dosya oluşturup ardından CDN’den JQuery’yi içe aktararak çevrimiçi olan kütüphaneyi rahatlıkla kullanabiliriz.

index.php dosyası

<!DOCTYPE HTML> <html lang="tr-TR"> <head> <meta charset="UTF-8"> <title>jQuery ile Form Kontrolü Nasıl Yapılır?</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <form id="form" style="text-align: center;"> <h3>İletişim Formu</h3> <p id="mesaj"></p> <label>İsim: </label> <input type="text" id="isim" placeholder="İsim"/></br> <label>Email: <span>*</span></label> <input type="text" id="email" placeholder="E-posta adresiniz"/> </br> <label>Telefon Numaranız: <span>*</span></label> <input type="text" id="telefon" placeholder="Telefon numaranız"/> </br> <label>Mesajınız: </label> <textarea id="mesajiniz" placeholder="Mesajınız"></textarea> </br> <input type="button" id="gonder" value="Mesajı Gönder"/> </form> </body> </html>

form-gonder.php dosyası

<?php $isim = $_POST['isim_form']; $email = $_POST['email_form']; $mesajiniz = $_POST['mesajiniz_form']; $telefon= $_POST['telefon_form']; $email = filter_var($email, FILTER_SANITIZE_EMAIL); if (filter_var($email, FILTER_VALIDATE_EMAIL)) { if (!preg_match("/^[0-9]{10}$/", $telefon)) { echo "<span>Lütfen telefon numaranızı kontrol ediniz, 10 karakterli ve başında sıfır olmadan giriniz.</span>"; } else { echo "Mesajınız başarılı bir şekilde gönderildi."; } } else { echo "<span>E-posta adresiniz hatalı, lütfen E-posta adresinizi kontrol ediniz.</span>"; } ?>

script.js dosyası

$(document).ready(function () { $("#gonder").click(function () { var isim = $("#isim").val(); var email = $("#email").val(); var mesajiniz = $("#mesajiniz").val(); var telefon = $("#telefon").val(); $("#mesaj").empty(); if (isim == '' || email == '' || telefon == '') { alert("Lütfen İsim, E-posta ve Telefon bölümünü doldurunuz."); } else { $.post("form-gonder.php", { isim_form: isim, email_form: email, mesajiniz_form: mesajiniz, telefon_form: telefon }, function (data) { $("#mesaj").append(data); if (data == "Mesajınız başarıyla iletildi.") { $("#form")[0].reset(); } }); } }); });

Yukarıdaki kodları kendinize düzenleyerek gereken form kontrolünü jQuery ile tamamlayabilirsiniz.

PHP ile BOT Nasıl Yapılır?

PHP ile BOT Nasıl Yapılır?

28 Aralık 2017
https Yönlendirmesi Nasıl Yapılır?

https Yönlendirmesi Nasıl Yapılır?

12 Mayıs 2017
WhatsApp Google Drive Yedekleme Nedir?

WhatsApp Google Drive Yedekleme Nedir?

06 Temmuz 2016
MTSAS Nedir? Nasıl Kayıt Olunur?

MTSAS Nedir? Nasıl Kayıt Olunur?

27 Eylül 2017