İçeriğe geç

ASP.NET ‘de Jquery ile Form Validation

Bilindiği gibi Jquery, bir çok client-side uygulamalarda sunucuyu fazla yormamak adına işlemleri browser tarafında çalıştırmaktadır. Bu yazımızda anlatacağımız konu ise Jquery ile Form Validation konusu olacaktır. ASP.NET’in kendi içinde RequiredValidation tolunu daha önceden kullandıysanız konuyu zorlanmadan anlayıp, işlemlerinizde uygulayabilirsiniz.

Neden Jquery Form Validation:

  • Client-side olup sunucuyu her seferinden meşgul etmemesi
  • Görünüm ve şıklık olarak daha responsive bir yapı sunması

 

Konuyu örneklendirip daha ayrıntılı anlatacak olursak,

ilk olarak boş bir ASP.NET WebForms sayfası açın ve aşağdaki Jquery nin javascript dosyalarını ekleyin.

1

Daha sonra body etiketinin içerisine de aşağıdaki textbox ve labellar eklenerek her biri birer div içinde olmak kaydıyla eklenir. (NOT: div içinde olmasının sebebi ekran düzgün ve sıralı bir şekilde görünmesi için. Tablo yaratılarak da yapılabilir. Fakat div kullanılması daha iyi olur.)

2

Eklenen textboxlar, verilen id ler aracılığıyla Jquery tarafından kontrol edilerek responslar ekranda görüntülenebilir. Jquery tarafında ise aşağıdaki şekilde kodlar yazılmalıdır.

3

Görüldüğü gibi formumuzun id sini alıp, Jquery’ nin (validate)  özelliğini kullanarak, rules ve message kısımlarını doldurduk.

required:true dersek, bu alan boş geçilemez olacaktır.

minlength:2 ise en az 2 karakter olmalıdır.

Aynı durum txtParola,txtParolaT ve txtEmail içinde geçerlidir. Parola Tekrarında ise ilk girilen parola ile aynı olması için “equalTo:”#txtParola” id sini yazarak 2 textbox taki şifreler birbirine eşit olmasını istedik.

———————————————————

jQuery.extend(jQuery.validator.messages, {
required: “”,
email: “”,
equalTo: “”,
maxlength: jQuery.validator.format(“”),
minlength: jQuery.validator.format(“”)
});

Bu kısımda kullandığımız parametrelerin ekranda nasıl görüntüleneceğini veya herhangi bir uyarı mesajları yazarakta görüntüleyebiliriz.

ÖR:

Jquery kısmında email parametresini kullandığımız için  message kısmında bunlunan email parametresine aşağıdaki gibi uyarı mesajı yazabiliriz.

email :”Email adresi yanlış”, gibi uyarı mesajları yazıp ekran da görüntülenmesini sağlayabilir.

required:”Bu alan zorunludur.”

equalTo :”Şifre eşleşmedi.”

———————————————————

NOT: Jquery’de error görünümünü değiştirmek için css kısmına aşağıdaki gibi bir eklenti yaparsanız. Uyarı renklerini özelleştirebilirisiniz.  Textboxlara girilen değerler doğrulanmadığı sürece sayfa postback olmayacaktır.

.error{

color: red;

}

Jquery kodları yazıldıktan sonra F5 ile çalıştırılarak işlem görülebilir.

4

 

Tarih:ASP.NET

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir