AĞUSTOS7
jquery validation plugin'i kullanarak form kontrolleri oluşturmak
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.
Ö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.
Oluşturulacak dosyalar
İletişim formumuzu oluşturalım (iletisim.asp içinde kullanılacak)
Tamamını Okuyun
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.
Tamamını Okuyun
Jquery ile uğraşmak çok zevkli oluyor. Hele de uğraşının içine ASP kodlamaları, XML, veritabanı bağlantıları girince tadından yenmiyor desek doğru olur.
