Ieri ho avuto a che fare per la prima volta con i validatori lato client di asp.net (regEx Validators, Req validators ecc. ecc.), per inciso li avevo usato prima senza nessun problema, ma per la pagina che si stava sviluppando ieri ho dovuto fare dei giochi di prestigio (per la verità non troppo ottimizzati).

Nella pagina erano presenti diversi DIV, ognuno contenente diversi controlli e naturalmente i div erano visualizzabili solo una alla volta (una versione parzialmente rivista dei tabControls).

I validatori funzionano perfettamente, il problema nasce solo sulla Proprietà "FocusOnError".

Solitamente settata a True senza particolari implicazioni di sorta, ci siamo accorti con dei fantastici errori JavaScript che tale property causava il tentativo (corretto) di dare il focus a controlli che non avevano passato la validazione, il problema era che i controlli erano in tab non visualizzati e quindi la Focus() andava in errore.

Sbirciando un po' in rete (non ci ho messo molto) ho trovato la funzione JS per la validazione lato client di tutti i validatori, ho impostato la FocusOnError a false e sul pulsante di submit ho aggiunto una onClientClick che lancia una funziona javascript di validazione.

 

   1:  function validatePage(){
   2:              Page_ClientValidate();
   3:              for (var kk=0; kk<Page_Validators.length; kk++) {
   4:                  if (!Page_Validators[kk].isvalid) {
   5:                      alert (Page_Validators[kk].controltovalidate);
   6:                      var nodeOri = $get(Page_Validators[kk].controltovalidate);
   7:                      var node = nodeOri;
   8:                      var index = -1;
   9:                      while (index == -1) {
  10:                          node = node.parentNode;
  11:                          for (var jj=0; jj<relTabIds.length;jj++) {
  12:                              if (relTabIds[jj] == node.id) {
  13:                                  index = jj;
  14:                                  break;   
  15:                              }
  16:                          }
  17:                      } 
  18:                      TabChanged(index);
  19:                      nodeOri.focus();
  20:                      return false;
  21:                  }
  22:              }            
  23:          }

La funzione si occupa di lanciare la validazione, controllare per tutti i validatori presenti (collezione Page_Validators) se hanno passato la validazione o meno, il primo che risulta non valido viene salvato come nodo per passargli in seguito il focus.

Sulla pagina è presente un array con i ClientId dei div visualizzati in relazione al tab attivo, e navigando il DOM a ritroso viene ricercato il div da visualizzare. La visualizzazione viene effettuata con la chiamata ad un'altra funzione JS "TabChanged" che si occupa di visualizzare il div passato e di nascondere i restanti.

Visualizzato il div non rimane che da chiamare il focus sul controllo.

Rimane da capire come posso istruire la pagina a non eseguire una seconda volta la validazione.

Technorati Tags: , ,