DevExpress ASPxDateEdit Client Side Validation İşlemleri


18 Ocak 2017 Hikmet Okumuş DevExpress Web

Merhaba arkadaşlar

Bu makalede sizlere ASPxDateEdit kontrolü ile istemci tarafında doğrulama işlemlerini anlatmaya çalışacağım. Kullanıcı kaydı yapılan bir form üzerinden örneklemeye çalışalım. Basit bir kullanıcı kaydı için kişiden Ad, Soyad ve Doğum Tarihi bilgilerini girmesini isteyelim. Örnek form görüntüsü aşağıdaki gibidir.

www.hikmetokumus.com

Doğrulama işlemi için, ASPxDateEdit kontrolünün Validation eventı kullanılmaktadır. Örneğimizde kullanıcının yaşı 18 den küçük olursa, girilen değerin geçersiz olduğunu belirtelim.


< dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
	< ClientSideEvents Validation="onValidate" />
< /dx:ASPxDateEdit>

www.hikmetokumus.com

Eğer geçersiz bir değer girilmişse, "EventArgs.isValid" özelliğini false olarak setleriz. False sonucuna göre yukarıdaki gibi kontrolün yanında bir uyarı çıkmaktadır. Varsayılan olarak tanımlı hata mesajı "Invalid value" gelmektedir. Mesajı aşağıdaki gibi değiştirebiliriz.
    < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < ValidationSettings ErrorText="Geçersiz değer">< /ValidationSettings>
        < ClientSideEvents Validation="onValidate" />
    < /dx:ASPxDateEdit>

www.hikmetokumus.com

Eğer yapılan kontrolün içeriğine göre hata mesajı değiştirilmek istenirse, Javascript tarafında "EventArgs.errorText" değeri setlenmektedir. Örneğimize göre mesajı revize edelim.
    function onValidate(s, e) {
        var birthday = e.value;
        if (!birthday)
            return;
        var today = new Date();
        var msecPerYear = 1000 * 60 * 60 * 24 * 365;
        var years = (today.getTime() - birthday.getTime()) / msecPerYear;
        if (years < 18) {
            e.isValid = false;
            e.errorText = "Girilen yaş 18 den küçüktür.";
        }
    }

www.hikmetokumus.com

Eğer kontrolün bilgi girişi zorunlu yapılmak istenirse, "RequiredField" özelliği kullanılmaktadır. "IsRequired" özelliği true olarak setlendiğinde, ekrana boş geçilemeyeceği ile ilgili bir hata mesajı çıkar.
    < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < ValidationSettings ErrorText="Geçersiz değer">
            < RequiredField IsRequired="true" />
        < /ValidationSettings>
        < ClientSideEvents Validation="onValidate" />
    < /dx:ASPxDateEdit>
Yukarıdaki kod parçasında şunu yaptığınızda ekrana boş geçilemez uyarısı gelecektir. Öncelikle bir tarih değeri girin ve ardından temizleyin. Görüntü aşağıdaki gibi olacaktır.

www.hikmetokumus.com

Eğer hata mesajını değiştirmek isterseniz, "ErrorText" özelliğini setlemeniz gerekmektedir.
    < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < ValidationSettings ErrorText="Geçersiz değer">
            < RequiredField IsRequired="true" ErrorText="Doğum tarihi zorunludur !" />
        < /ValidationSettings>
        < ClientSideEvents Validation="onValidate" />
    < /dx:ASPxDateEdit>

www.hikmetokumus.com

"Doğum tarihi zorunludur !" kontrolünün "Kaydet" butonuna basıldığında yapılması için, "ValidationGroup" tanımlamasının yapılması gerekmektedir.
    < dx:ASPxDateEdit ID="dateEdit" ClientInstanceName="dateEdit" runat="server" Theme="Aqua">
        < ValidationSettings ErrorText="Geçersiz değer" ValidationGroup="SaveGroup">
            < RequiredField IsRequired="true" ErrorText="Doğum tarihi zorunludur !" />
        < /ValidationSettings>
        < ClientSideEvents Validation="onValidate" />
    < /dx:ASPxDateEdit>
	< dx:ASPxButton runat="server" ClientInstanceName="btnSave" Text="Kaydet" ValidationGroup="SaveGroup" AutoPostBack="false">
	< /dx:ASPxButton>
Doğrulama işlemlerini kısaca özetlemeye çalıştım. İki tarih arası kontrol, belli bir tarih kontrolü, tarihin formatının kontrolü vb. farklı örnekler üzerinde doğrulama işlemlerinizi gerçekleştirebilirsiniz.

Başarılar dilerim.



Yorum Ekle