asp.net validation kontrollerinin javascript client apisinin kullanımı ve validasyonun css ile düzenlenmesi

Merhabalar, bu yazıda asp.net validations kontollerinin client site api (javasscript api) sine bakıp ve örnek bir de uygulama yapıyor olacağız. Örnek olarak validasyon sonucunda çıkan errormessage yazısının rengini , arka plan rengini değişitirip ekrana fadeIn olarak yavaş gelemesini ve fadeout olarak kaybolmasını sağlıyor olalaım. Ayrıca validation kriterine uymayan textbox ın da arka plan rengini de farklı gösteriyor olacağız. Örneğe geçmeden önce asp.net validation kontrollerin nasıl çalıştığına bir bakalım. Asp.net client da yapılan validasyon için IIS üzerinde bulunan WebUIValidation.js dosyasını kullanıyor. Bu script dosyasını içerisinde tün validasyon kontrollerinin çalıması için gereken javascirpt fonksliyonları görebiliriz. asp.net validasyon kontorlleri server control olduklarından sayfaya html olarak render edilirken sayfada bulunan her validation contolü için bir javascirpt nesnesi oluşuturulur ve bu nesnelerin her birine bazı özellilker set edilir, ve bu nesnelerin her biri Page_Validators adıyla tanımlanan bir diziye atanır. örneğin içinde 3 tane RequiredFieldValidator 1 tane regularexpressionvalidator   kontolü olan aspx sayfasında kaynağı görüntilediğimizde aşağıdaki gibi javascirpt kodlarını görebiliriz..

 aspx in html

<table cellspacing="1" class="style1">
        <tr>
            <td>
                İsim</td>
            <td>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                    ControlToValidate="txtName" CssClass="customValiadator"  
                    ErrorMessage="İsim alanı boş geçilemez." ValidationGroup="g1"></asp:RequiredFieldValidator>
                <asp:TextBox ID="txtName" runat="server" ValidationGroup="g1"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Soyisim</td>
            <td>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                    ControlToValidate="txtSurname" CssClass="customValiadator" 
                    ErrorMessage="Soyisim alanı boş olamaz." ValidationGroup="g1"></asp:RequiredFieldValidator>
                <asp:TextBox ID="txtSurname" runat="server" ValidationGroup="g1"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                E-Mail</td>
            <td>
                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
                    ControlToValidate="txtEmail" CssClass="customValiadator" 
                    ErrorMessage="Geçersiz E-email formatı." 
                    ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
                    ValidationGroup="g1"></asp:RegularExpressionValidator>
                <asp:TextBox ID="txtEmail" runat="server" ValidationGroup="g1"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
                    ControlToValidate="txtEmail" CssClass="customValiadator" 
                    ErrorMessage="E-posta alanı boş olamaz." ValidationGroup="g1"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                <asp:Button ID="Button1" runat="server" Text="Gönder" ValidationGroup="g1" />
            </td>
        </tr>
    </table>

js

<script type="text/javascript">
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("RequiredFieldValidator1"), document.getElementById("RequiredFieldValidator2"), document.getElementById("RegularExpressionValidator1"), document.getElementById("RequiredFieldValidator3"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate = "txtName";
RequiredFieldValidator1.errormessage = "İsim alanı boş geçilemez.";
RequiredFieldValidator1.validationGroup = "g1";
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
var RequiredFieldValidator2 = document.all ? document.all["RequiredFieldValidator2"] : document.getElementById("RequiredFieldValidator2");
RequiredFieldValidator2.controltovalidate = "txtSurname";
RequiredFieldValidator2.errormessage = "Soyisim alanı boş olamaz.";
RequiredFieldValidator2.validationGroup = "g1";
RequiredFieldValidator2.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator2.initialvalue = "";
var RegularExpressionValidator1 = document.all ? document.all["RegularExpressionValidator1"] : document.getElementById("RegularExpressionValidator1");
RegularExpressionValidator1.controltovalidate = "txtEmail";
RegularExpressionValidator1.errormessage = "Geçersiz E-email formatı.";
RegularExpressionValidator1.validationGroup = "g1";
RegularExpressionValidator1.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
RegularExpressionValidator1.validationexpression = "\\w+([-+.\']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*";
var RequiredFieldValidator3 = document.all ? document.all["RequiredFieldValidator3"] : document.getElementById("RequiredFieldValidator3");
RequiredFieldValidator3.controltovalidate = "txtEmail";
RequiredFieldValidator3.errormessage = "E-posta alanı boş olamaz.";
RequiredFieldValidator3.validationGroup = "g1";
RequiredFieldValidator3.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator3.initialvalue = "";
//]]>
</script>

Oluşan nesnelerin properylerini incelediğimizde isimlerininden   componentleinin bizim set ettiğimiz değerlerin olduğunu anlayabilriz zaten.   Yani uzun lafın kısası  Page_Validators arrayi bizim herşeyimiz orada bizim arağımız herşey var onu çok seviyoruz biz.  Artık bizim örneğimize geçelim.  

 

İlk olarak validasyon mesajını görsel olarak değiştirmek için bir css vermemeiz gerekiyor, onun için aşağıdaki gibi bir css classımız olsun,

 

css

 .customValiadator
{
    background-color: #FFFF00;
    display: none;
    color: #000000 !important;
    position: absolute;
    border: 1px solid black;
    padding: 1px 5px 1px 10px;
    font-size: 11px;
    font-family: Arial;
    visibility: visible !important;
    position:absolute;
}
    .ilhanValidatorInputInvalid
{
    border: 1px solid #000000;
    background-color: #FF9999;
}

Şimdi bu classı  validation contollerine eklememiz gerekir. Buarada önemli olan küçük  ayrıntı   css içerisinde iki yerde !important  özelliği bulunmaktadır. Bunun nedeni ise asp.netin kendi inline stylenin eklemesi. Biz validasyon kontlümüzü özelleştireceğimiz için onu eziyoruz , aynı şekilde asp.net varsayılan renk olarak kırmzı set ediyor biz onuda eziyoruz.  

 

        var txtleft = 0;
        var txttop = 0;
        var txtWidth = 0;



        window.onload = function () {
            $.each(Page_Validators, function (i, v) {

                txtleft = $("#" + v.controltovalidate).offset().left;
                txttop = $("#" + v.controltovalidate).offset().top;
                txtWidth = $("#" + v.controltovalidate).width();

                $(v).css({
                    left: (txtWidth + txtleft + 5),
                    top: txttop

                });

                $("#" + v.controltovalidate).blur(function () {
                    ValidatorValidate(v, v.validationGroup, null);
                })

            });

            ValidatorUpdateDisplay = function (val) {
                if (val.isvalid) {
                    if (val.style.display != "none" && val.style.display != "") {
                        $(val).fadeOut("slow");
                    }

                }
                else {
                    if (val.style.display == "none" || val.style.display == "") {
                        $(val).fadeIn("slow");
                    }



                }
                if (hasInvalidValidator(val)) {
                    $("#" + val.controltovalidate).removeClass("ilhanValidatorInputInvalid").addClass("ilhanValidatorInputInvalid");
                } else {
                    $("#" + val.controltovalidate).removeClass("ilhanValidatorInputInvalid");
                }
            }


        }

        function hasInvalidValidator(val) {
            var rval = false;
            $.each(Page_Validators, function (i, v) {
                if (v.controltovalidate == val.controltovalidate && v.isvalid == false) { rval = true; return; }
            });
            return rval;
        }

 

Şimdi ne yaptık ; ilk olarak sayfa ilk yüklendiğinde WebUIValidation.js içerinde bulunan ValidatorUpdateDisplay ismine sahip olan ve validasyon mesajının çıktığı spani gizleyen ya da gösteren fonksiyonu override ediyoruz. Bu fonksiyon array içinde olan validasyon nesnesini alıyor. bu fonskiyon normal olarak validasyon işleminden sonra çağırılıyor. validasyon nesnelerinin üzerinden isvalid adında property bulunuyor bulunuyor ve validasyon işleminden sonra true ya da false set edilir. isvalid false ise validasyon spani jquery nin fadeIn methodu ile gizliyoruz . Ayrıca validasyon kontolünün yapıldığı textbox a aşağıda yazan css classı ekliyoruz. Böylece validasyon mesajı sarı renkde yavaşca görünerek gelirken textboxında arka plan rengi değişecek. isvalid true olduğunda ise tam aksi işlem yapılcak.

    .ilhanValidatorInputInvalid
{
    border: 1px solid #000000;
    background-color: #FF9999;
}

 

Ayrıca normalde default validasyonlarda olmayan biz özelliğide biz ekledik ; normal şartlarda validasyon işleminin başlaması için ilk olarak buton ile tetiklenmesi gerekir ancak biz javascirpt kodunun içerinde $("#" + v.controltovalidate).blur satırı ile textboxların blur eventinde yine WebUIValidation.js içerinde bulunan ValidatorValidate fonksiyonunu çağırıyoruz bu fonksliyona paremetre olarak validasyon nesnesini ve validasyonun yapılcağı textboxı veriyoruz. Görüldüğü gibi yapılması gereken ise , validasyon kontrollerinin cssClassını set etmek ve css dosyasını istediğimiz gibi düzenlemek ve aspx sayfamıza js ve css dosyasını eklemek sadece .

Ekran görüntüsü aşağıdaki gibi olacak.










Başka bir yazıda görüşmek üzere hoşçakalın.

Bunu beğen
Paylaş

Yorumlar
Yorum Yaz
İsim : (*)
E-mail :
Web Adresi:
:
(*)
 
Kapat