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