Több vezérlő validálása kliens oldalon

Gyakran előforduló feladat, hogy egy vezérlő értékét nem önmagában kell validálnunk, hanem más vezérlők értékével együtt kell érvényesnek lennie. Sajnos az ASP.NET beépített validátorai közül egyedül a CompareValidator képes erre, aminek azonban végesek a képességei. Szerver oldalon még könnyen megbirkózunk a feladattal, de hogyan oldjuk meg, hogy a kliens oldali validáló függvényünk bármelyik vezérlő értékének változása esetén lefusson?

Bár nem kifejezetten erre találták ki, célszerű egy CustomValidatorból kiindulni, hogy a kódunk szerves része legyen a standard validálási mechanizmusnak, és természetesen állítsuk be a ClientValidationFunction paramétert is. Az első bökkenő ott jön, hogy a ControlToValidate tulajdonságban csak egyetlen vezérlőt adhatunk meg, és így a kliens oldali ellenőrző függvényünk is csak egy vezérlő értékét kapja meg. Itt kell egy kis trükk: expando attribútumként csapjuk hozzá a validálandó vezérlők (itt az egyszerűsített példában txtStartDate és txtEndDate) kliens oldali ID-jait a validátor vezérlőhöz (cvDateOrder):

  ScriptManager.RegisterExpandoAttribute( 
this, this.cvDateOrder.ClientID, "StartDateID", this.txtStartDate.ClientID, false ); ScriptManager.RegisterExpandoAttribute(
this, this.cvDateOrder.ClientID, "EndDateID", this.txtEndDate.ClientID, false );

A következő lépés, hogy a kliens oldali validáló keretrendszer eseménykezelésébe befűzzük mindkét vezérlőt az ASP.NET beépített (bár nem éppen agyondokumentált) JavaScriptes ValidatorHookupControl függvényével. Ehhez mindenképp JavaScriptre lesz szükségünk, aminek el kell érnie a validátor vezérlőt, ezért adjuk át neki a kliens oldali azonosítóját:

  string init = String.Format( "onDateFilterInit('{0}');", this.cvDateOrder.ClientID );
  ScriptManager.RegisterStartupScript( 
this.Page, this.Page.GetType(), "onDateFilterInit", init, true );

  function onDateFilterInit(strValID) {
    var $cvDateOrder = $("#" + strValID);
    ValidatorHookupControl($("#" + $cvDateOrder.attr("StartDateID"))[0], $cvDateOrder[0]);
    ValidatorHookupControl($("#" + $cvDateOrder.attr("EndDateID"))[0], $cvDateOrder[0]);
  }

Így már mindkét vezérlő értékének változása esetén meg fog hívódni a validáló függvényünk. Ott pedig ugyanígy az expando attribútumon keresztül megszerezhetjük a két ellenőrizendő értéket:

  function onDateFilterValidate(source, args) {
    // Megkeressük a validátor vezérlőt.
    var $cvDateOrder = $("#" + source.id);

    // Megszerezzük a validálandó vezérlők azonosítóit, majd azon keresztül az értékeit.
    var startDate = $("#" + $cvDateOrder.attr("StartDateID")).val();
    var endDate = $("#" + $cvDateOrder.attr("EndDateID")).val();
    // Értékek vizsgálata és args.IsValid beállítása...
  }

Technorati-címkék: ,,,

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s