ASP.NET MVC 4 RC Razor İpucu 6 – Client Side Validation (jquery.validate)


Merhaba MVC Severler,

Önceki yazımda ASP.NET MVC 4 RC ile Twitter ve Facebook Helper’larının kullanımını gördük. Bu yazımda Client Side Validation’dan (İstemci Taraflı Doğrulama) bahsedeceğim.

Hazırlık

Uygulamamızı Visual Studio 2012 RC Ultimate sürümünde ASP.NET MVC 4 RC Basic Template üzerinde yapacağız.  Visual Studio 2012 RC Ultimate’i buradan, ASP.NET MVC 4 RC’yi ise buradan indirebilirip yükleyebilirsiniz.

Giriş

ASP.NET MVC ile ilgili aslında sıkça kullanılan Validation yöntemi Model kullanarak yapılandır. Fakat bir çok durumda Model kullanmak zorunda değiliz peki Validation’ını nasıl yapacağız?  Ayrıca hata bu işlemleri yaparken jQuery kullanmak istiyorsak, bu yazım tam size göre. Çünkü jQuery ile Client Side Validation yapacağız. Haydi başlayalım.

Uygulama

1) Visual Studio 2012 RC Ultimate’ten ASP.NET MVC 4 Web Application türünde uygulamamızı .NET Framework 4.0’da açıyoruz:

2) ASP.NET MVC 4 RC Project Template olarak Basic’i seçiyoruz: Empty’i seçmiyoruz çünkü Basic ile, Scripts klasörü içerisinde Script dökümanları, Content klasörü içerisinde themes ve Site.css dökümanı ile BundleConfig dosyası içerisinde gerekli düzenlemeler otomatik olarak gelmektedir.

3) Home adında bir Controller ve Controller’in içerisinde Index adında bir View oluşturuyoruz:

Burda Index View’ini oluşturuken Layout bölümünü boş bırakırsak _viewstart file otomatik olarak bizim Layout’umuz olacaktır. _viewstart Layout’uda içerisinde _Layout.cshtml’i çağırmaktadır:

Buradan görüyoruz ki Scripts.Render ve Styles.Render metotları çağırılmaktadırlar. Bunlar BundleConfig.cs içerisinden gelmektedir:

4) Bizim için yazılmış hazır bundle’lar var fakat biz aşağıdaki gibi ihtiyacımız olan dosyaları ekliyoruz:

Burada bizim ihtiyacımız olan iki dosya var;

  • jquery-1.6.2.js
  • jquery.validate.js

bu dosyaları “bundles/jqueryValidation” adı ile ekliyoruz.

5) _Layout.cshtml içerisinde aşağıdaki değişiklikleri yapıyoruz:

Burada yaptığımız az önce BundleConfig.cs içerisinde yaptığımız değişiklikler,

6) Oluşturduğumuz Index isminde ki View’da bir table içerisine aşağıdaki textbox’ları ekliyoruz:

Ayrıca burada kullandığımız lbl ve txt class’ları aşağıdaki gibi yazıyoruz:

7) View içerisindeki iletisimFormu isimli Form’un validate işlemini jQuery ile bu formu seçip validate yapacağız. Burada kullanacağımız aslında gerçekten oldukça basit bir kaç satır kod:

Burada kullanacağımız yukarıdaki form’u tasarlarken verdiğimiz isimleri burada rules altında veriyoruz. Burada yaptıklarımızı aşağıdaki videoda görebiliriz:

8) Hata mesajlarının rengini ayarlama:

Fakat video’da da gördüğümüz gibi hata mesajları siyah’tır. Peki bu mesajlar böyle midir? Hayır böyle değildir, bu hatalar ile ilgili “jquery.validate.js” dosyasına bir göz atalım:

Buradaki script içerisinde ister default olarak verilmiş olan error ve valid isimlerinde ya bir class oluşturacağız ya da kendimiz bir class oluşturup buraya ismini vereceğiz.

     .error
     {
         border: 1px solid Red;
         color: Red;
     }
     .valid
     {
         border: 1px solid Green;
     }
     label.error
     {
         color: Red;
         border: 0px;
     }

Yaptığımız değişikleri aşağıdaki video’da görelim:

9) Hata mesajlarını Türkçe’ye çevirelim: Script üzerinde aşağıdaki değişiklikleri yaparak hata mesajlarını Türkçe’ye çevirebiliriz.

        $(document).ready(function () {
            $(“#iletisimFormu”).validate(
               {
                   rules:
                       {
                           txtAdSoyad: { required: true },
                           txtEmail: { required: true, email: true },
                           txtMesaj: { required: true, maxlength: 255, minlength: 30 }
                       },
                   messages:
                       {
                           txtAdSoyad: { required: “Ad Soyad alanı boş bırakılamaz” },
                           txtEmail: { required: “Email alanı boş bırakılamaz”, email: “Email formatında giriniz” },
                           txtMesaj: { required: “Mesaj alanı boş bırakılamaz”, maxlength: “255 karakterden fazla olamaz”, minlength: “30 karakterden az olamaz” }
                       }
               });
        });

10) Mutlu son😀 Son halini birlikte görelim:

İndirme

Uygulamayı buradan indirebilirsiniz.

Umarım faydalı bir yazı olmuştur.

İyi çalışmalar

MVC ile kalın.

, , , , , , , , , , , , ,

  1. #1 by burcu yaman on October 15, 2012 - 7:40 am

    Her formda sürekli böyle JS mi yazacağız?
    Birde strongly oluşturduğumuz zaman html5 attr. gelmekte bunlardan nasıl kurtulabiliriz validasyonda vs.
    teşekkürler:

    • #2 by Mahmut Can Sözeri on October 31, 2012 - 3:14 pm

      HTML 5 attribute gelmesinin sebebi sayfanın HTML 5 standartına göre yazılmasındandır. Siz istediğiniz versiyona kendiniz çekebilirsiniz.

  2. #3 by Hüseyin Sekmenoğlu on September 22, 2014 - 12:38 pm

    çok iyi açıklamışsınız. teşekkürler.

  3. #4 by Budala on April 25, 2015 - 1:23 pm

    Güzel kardeşim, eline emeğine vaktine sağlık. İnternette adamakıllı bir sayfa bulamadım. Yerlisi de yabancısı da oldukça küçük ve karmaşık çözümler sunmuş. Bu hakikaten içime sindi, güzel de oldu. Tekrar teşekkür ederim.

  4. #5 by EnesGüven on November 29, 2016 - 8:45 pm

    Merhabalar , client side yazdığımız zaman kullanıcı sağ tık öğeyi denetle yapıp validate function’unu silebilir. Buna nasıl önlem alabiliriz ?

    Bu arada konu anlatımı için teşekkürlerimi sunarım.

  1. [Blog Post(Turkish)] ASP.NET MVC İle İlgili Tüm Yazılarım (29 Yazı, 1 Yazı Dizisi ve 1 İpucu Serisi) « Mahmut Can Sozeri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s