AĞUSTOS7
jquery validation plugin'i kullanarak form kontrolleri oluşturmak
Bu konu ekleneli 3 ay'dan uzun bir süre geçmiş. Konu geçerliliğini kaybetmiş ve/veya içerdiği linkler yayında olmayabilir.
Merhaba,
Web sitelerimizdeki formlar bazen başımıza bela olabiliyor. Sadece bu formlara spam post etmek için kullanılan programlar ortalarda dolaşmaya başladı.
Bu tür spam postlardan kurtulmak ve / veya formlarımıza hatalı veriler girilmesini engellemek için Javascript, VBScript gibi scrpit dilleri kullanıyoruz, yada hiç birini kullanmadan direk formun post edildiği sayfada kontrollerden geçirerek verilerin doğruluğunu kontrol ediyoruz. Ayrıca birde güvenlik kodu (captcha olarak da biliniyor) kullanıyoruz.
Ben kişisel olarak ne kadar javascript, güvenlik kodu vb. yöntemlerle forma girilen bilgileri kontrol etsem de post edilen sayfada da asp ile standart bir kontrol uygulamayı tercih ediyorum.
Her neyse jquery kullanmaktan ne kadar zevk aldığımı ve ne kadar beğendiğimi önceki yazılarımdan fark etmişsinizdir. Jquery'nin validation plug-in'i formların kontrolünü oldukça rahat bir hale getiriyor. Birazdan basit bir form için jquery kullanarak form kontrolünü nasıl yapabileceğinize dair örnek bir kod paylaşacağım.
İlk olarak ihtiyacımız olan js dosyalarını belirleyelim.
- jquery-1.2.6.pack.js
- Validation.js
Örneğimizde bir iletişim formu oluşturup, formdaki bazı alanların, doldurulması zorunlu olmasını ve bu doldurulan bilgilerin belli standartlarda olmasını (geçerli bir mail adresi, geçerli bir url yada sadece rakam yazılması gibi...) sağlayan bir kontrol uygulayacağız.
Aynı zamanda asp ile iletişim formu hazırlama konusunda da da basit bir örnek vermiş olacağız :) 1 taşla 2 kuş vurmak böyle bişi oluyor sanırım.
Oluşturulacak dosyalar
- iletisim.asp
- iletisim-gonder.asp
- aspcaptcha.asp (Bu dosyanın kodlarını yayınlamıyorum. Bana ait bir uygulama değil kodların çalışır halinde bu dosyayı bulabilirsiniz.)
- iletisim.css
İletişim formumuzu oluşturalım (iletisim.asp içinde kullanılacak)
<form id="iletisimform" name="iletisimform" method="post" action="iletisim-gonder.asp">
<table width="736" border="0" align="center" cellpadding="1" cellspacing="1" class="Tablo">
<tr>
<td colspan="3"><strong>İletişim Formu</strong><br />
Lütfen * ile belirtilmiş alanları boş bırakmayınız.</td>
</tr>
<tr>
<td width="139">Ad Soyad *</td>
<td width="4">:</td>
<td width="583"><input name="adsoyad" type="text" class="required FormInput" id="adsoyad" title=" Boş bırakmayınız!" /></td>
</tr>
<tr>
<td>E-posta *</td>
<td>:</td>
<td><input name="email" type="text" class="required email FormInput" id="email" title=" Geçerli bir e-posta adresi yazınız!" /></td>
</tr>
<tr>
<td>Telefon</td>
<td>:</td>
<td><input name="telefon" type="text" class="FormInput" id="telefon" /></td>
</tr>
<tr>
<td>Konu *</td>
<td>:</td>
<td><input name="konu" type="text" class="required FormInput" id="konu" title=" Boş bırakmayınız!" /></td>
</tr>
<tr>
<td valign="top">Mesajınız *</td>
<td valign="top">:</td>
<td><textarea name="mesaj" rows="6" class="required FormInput" id="mesaj" title=" Boş bırakmayınız!"></textarea></td>
</tr>
<tr>
<td> </td>
<td>:</td>
<td><img src="aspcaptcha.asp" /> Yandaki rakamları aşağıdaki alana yazınız</td>
</tr>
<tr>
<td>Güvenli Kodu *</td>
<td> </td>
<td><input name="kod" type="text" class="required number FormInput" id="kod" title=" Sadece rakam yazmalısınız!" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="button" id="button" value="Gönder" /></td>
</tr>
</table>
</form>
İletişim formunda dikkat etmenizi istediğim bölümler var. Kodların arasında form elemanlarının class parametrelerinde required,required mail,required url gibi class isimleri ve title parametresi içinde "Lütfen boş bırakmayın", "geçerli mail adresi yazın" gibi açıklamalar yazdım.
Bu bilgilerden class parametresinde belirtilen isimler validation plug-in'i tarafından oluşturulan kontrollerdir. Title parametresinde kullanılan bilgiler ise ilgili form elemanında yapılan kontrolde olumsuz bir durum oluşması sonrası ziyaretçiye verilecek mesaj bilgisidir.
Eğer title parametresi kullanmazsanız js dosyasındaki standart hata mesajları görüntülenecektir.
Bu bilgilerden class parametresinde belirtilen isimler validation plug-in'i tarafından oluşturulan kontrollerdir. Title parametresinde kullanılan bilgiler ise ilgili form elemanında yapılan kontrolde olumsuz bir durum oluşması sonrası ziyaretçiye verilecek mesaj bilgisidir.
Eğer title parametresi kullanmazsanız js dosyasındaki standart hata mesajları görüntülenecektir.
Formumuzun kontrolleri için gereken js dosyalarını ekleyelim.
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
Kontrolleri gerçekleştirecek javascript kod bloğunu <head>…</head> elementleri içine ekleyelim
<script language="javascript">
$(document).ready(function() {
$("#iletisimform").validate();
});
</script>
İletişim formu doldurulduktan sonra işlem yapacak olan iletisim-gonder.asp yi hazırlayalım.
Bu örnekte Persits Mail (ASPEMAIL) bileşeni kullanarak mail gönderimi yapıcaz.
<%
' Güvenlik kodu kontrolü için kullanacağımız fonksiyon
Function CheckCAPTCHA(valCAPTCHA)
SessionCAPTCHA = Trim(Session("CAPTCHA"))
Session("CAPTCHA") = vbNullString
if Len(SessionCAPTCHA) < 1 then
CheckCAPTCHA = False
exit function
end if
if CStr(SessionCAPTCHA) = CStr(valCAPTCHA) then
CheckCAPTCHA = True
else
CheckCAPTCHA = False
end if
End Function
' Mail gönderimi için kullanacağımız sub
Sub MailGonder(strAlacak, strBaslik, strMetin)
SET objMail = Server.CreateObject("Persits.MailSender")
With objMail
.Host = "mail.domain.com"
.Username = "mail@domain.com"
.Password = "Mail Sifresi"
.From = "mail@domain.com"
.IsHTML = True
.Charset = "iso-8859-9"
.AddAddress strAlacak, strAlacak
.Subject = strBaslik
.Body = strMetin
.Send
End With
SET objMail = Nothing
End Sub
' Formdan gelen bilgileri değişkenlere yüklüyoruz
strAdSoyad = Request.Form("adsoyad")
strEmail = Request.Form("email")
strTelefon = Request.Form("telefon")
strKonu = Request.form("konu")
strMesaj = Request.Form("mesaj")
strKod = Request.Form("kod")
' Eğer güvenlik kodu hatalı girilmiş ise
if Not CheckCAPTCHA(strKod) then %>
Güvenlik kodu hatalı girildi
<%
' Eğer formda bulunan zorunlu alanlardan her hangi birisi boş ise
elseif strAdSoyad = "" OR strEmail = "" OR strkonu = "" OR strMesaj = "" OR strKod = "" Then %>
Lütfen formdaki zorunlu alanları doldurunuz
<%
' Herşey olması gerektiği gibi ise
else
' Mail içeriğini oluşturuyoruz. Çok uğraşmamak için basit bir içerik oluturdum, siz düzenlersiniz artık :)
strMailBaslik = "İletişim formu gönderildi."
strMailMesaj = "Merhaba web sitesinde iletişim formu dolduruldu. ayrıntılar aşağıda,<hr><br>"
For Each veri in Request.Form()
strMailMesaj = strMailMesaj &"<b>"& Veri &":</b> "& Request.Form(veri) &"<br>"
Next
strMailMesaj = strMailMesaj &"<hr>"
'Mail gönderim kodları
MailGonder "mail@domain.com", "Mail başlığı", strMailMesaj
end if %>
Css dosyamızı hazırlayalım
@charset "iso-8859-9";
.FormInput {
font-family: "trebuchet MS";
font-size: 13px;
font-weight: normal;
color: #333333;
border: 1px solid #333333;
width: 350px;
}
.FormInput.error {
border: 1px dotted #FF0000;
color:#FF0000;
}
.Tablo {
font-family: "trebuchet MS";
font-size: 14px;
font-weight: normal;
color: #333333;
}
.FormInput.error class'ı hata oluşması durumunda ilgili form elemanının göze çarpması için rengini değiştirmeye yarıyor. Kendi isteğinize göre farklı kombinasyonlar oluşturmak sizin elinizde
… ve örnek çalışır hale geldi.
- Çalışır halini görmek için buraya tıklayın (Demo halinde mail gönderim işlemi pasif edilmiştir)
- Çalışır halini ve bahsedilen tüm dosyaları bilgisayarınıza indirmek için tıklayın.
Böylece hem asp ile iletişim formu hazırlama konusunda hem de jquery kullanarak form kontrolleri yapmış olduk.
Umarım işinize yarayacak bir örnek olmuştur.
