Utilizzare i validator controls di ASP.NET

Nella progettazione di form web, la parte più noiosa è forse la programmazione della convalida del form stesso. Infatti per garantire la massima compatibilità tra i vari browser esistenti è necessario scrivere sia codice lato-client in JavaScript, sia del codice lato-server come maggiore sicurezza di riuscita della convalida, nel caso qualche utente avesse disabilitato l'esecuzione degli script lato-client.

ASP.NET, per risolvere questo 'problema', ci mette a disposizione dei controlli per la convalida, noti come validator controls .

Questi interessano la maggior parte dei contesti di convalida, oltre alla possibilità di utilizzare un comando di convalida personalizzabile.

Ecco un elenco dei validator controls disponibili:

  • <ASP:RequiredFieldValidator>: verifica se il comando convalidato contiene un valore;
  • <ASP:CompareValidator> verifica se il valore del comando convalidato è uguale al valore di un altro comando o a un valore specifico;
  • <ASP:RangeValidator> verifica se il valore del comando convalidato è compreso in un intervallo numerico o è contenuto in un testo specifico;
  • <ASP:RegularExpressionValidator> verifica se il valore del comando convalidato corrisponde ad una espressione regolare;
  • <ASP:CustomValidator> esegue un comando di convalida personalizzabile; se il comando da convalidare non contiene nessun valore non si verificherà nessuna convalida. Per evitare questo problema si può utilizzare in comando <ASP:RequiredFieldValidator>
  • <ASP:ValidationSummary> visualizza il riepilogo di tutti gli errori riscontrati in fase di convalida.

Usare i validator controls

Il principio di utilizzo dei validator controls si basa sull'associazione di uno o più validator controls (che vengono legati tra loro con la logica AND) a ciascuno dei comandi di input da convalidare.

Quando l'utente invia la pagina, per esempio mediante un comando submit, ogni comando di convalida controlla se il valore immesso corrisponde ai criteri di convalida. Una volta che tutti i validator controls hanno eseguito la verifica, viene settata la proprietà di pagina Page.IsValid.

Se anche solo uno dei controlli non passa il test di convalida l'intera pagina viene 'settata' come invalida ed i controlli che hanno fallito il test visualizzano un messaggio di errore.

Inoltre, se impostato, il comando <ASP:ValidationSummary> visualizzerà il riepilogo degli errori contenuti nella pagina.

Visualizzazione dei messaggi di errore

I validator controls non sono visibili nelle pagine HTML. Comunque, nel caso di errori nel processo di convalida, viene prodotto un messaggio di errore visualizzabile in diversi modi:

  • Posizione: ogni comando di convalida visualizza, dopo il controllo da convalidare, il messaggio di errore;
  • Sommario: tutti i messaggi di errore vengono raggruppati e visualizzati in un punto predefinito della pagina. Se il browser utilizzato è Internet Explorer 4.0 o superiore è possibile visualizzare il sommario degli errori all'interno di una message box;
  • Posizione e Sommario: gli errori vengono visualizzati sia dopo il controllo da convalidare, sia raggruppati in un punto predefinito della pagina. Questa opzione può essere utilizzata per esempio per visualizzare accanto al controllo una descrizione breve o un suggerimento relativo al controllo stesso e una descrizione più estesa dell'errore nel sommario;
  • Personalizzata: è possibile creare una visualizzazione degli errori personalizzata utilizzando le informazione sugli errori fornite.

Convalida lato-server e lato-client

Se il browser con cui si sta visualizzando la pagina supporta lo standard DHTML, la convalida avviene anche lato-client: gli errori vengono intercettati in tempo reale e i messaggi d'errore visualizzati nel momento in cui il campo da convalidare non è più quello corrente (per esempio quando l'utente preme il tasto TAB per spostarsi al comando successivo).

Nel caso in cui non si voglia implementare la convalida lato-client è possibile disattivarla impostando la proprietà EnableClientScript del comando di convalida su False.

La convalida lato-server viene comunque sempre effettuata, a garanzia dell'effettiva integrità dei dati.

La classe BaseValidator

Tutti i validator controls ereditano dalla classe BaseValidator , contenuta nel namespaceSystem.Web.UI.WebControls .

La classe BaseValidator espone una collezione di proprietà comuni a tutti i validator controls:

  • ControlToValidate: imposta o restituisce il nome del comando da convalidare;
  • Display: questa proprietà può assumere uno dei seguenti valori:
    • None : il messaggio di errore non viene visualizzato accanto al controllo da convalidare; questa opzione può essere utilizzata se si vuole visualizzare il messaggio d'errore solo nel controllo ValidationSummary
    • Static : il comando di convalida visualizza un messaggio d'errore se la convalida fallisce. Lo spazio per il messaggio d'errore viene calcolato all'interno della pagina anche se la convalida non fallisce, quindi il layout della pagina non cambia
    • Dynamic : il comando di convalida visualizza un messaggio d'errore se la convalida fallisce. Lo spazio per il messaggio d'errore viene calcolato dinamicamente nella pagina quando la convalida fallisce, quindi potrebbe cambiare il layout della pagina
  • EnableClientScript: imposta o restituisce un valore booleano che indica se la convalida lato-client è attiva
  • Enabled: imposta o restituisce un valore booleano che indica se la convalidà verrà effettuata
  • ErrorMessage: imposta o restituisce il testo del messaggio visualizzato nel caso la convalida fallisca. Questa proprietà è utilizzata per visualizzare differenti messaggi d'errore nel controllo ValidatioSummary.
  • ForeColor imposta o restituisce il colore con cui verrà visualizzato il messaggio d'errore nel caso la convalida fallisca
  • IsValid: imposta o restituisce un valore booleano che indica se il valore del comando di input associato ha passato la convalida
  • Text: imposta o restituisce il testo che sarà visualizzato come messaggio d'errore nel caso la convalida fallisca. Se questa proprietà non viene settata, come messaggio d'errore viene utilizzata la proprietà ErrorMessage.

Membri specifici dei validator controls

Ogni comando di convalida dispone, oltre alle proprietà e metodi che eredita dalla classe BaseValidator, di proprietà, metodi ed eventi specifici:

Comando Proprietà Evento

RequiredFieldValidator

InitialValue

-

CompareValidator

ControlToCompare

Operator

Type

ValueToComapre

-

RangeValidator

MaximumValue

MinimumValue

Type

-

RegularExpressionValidator

ValidationExpression

-

CustomValidator

ClientvalidatorFunction

OnServerValidate

ValidationSummary

DisplayMode

ShowHeaderText

ShowMessageBox

ShowSummary


Utilizzo dei validator controls

Giunti a questo punto vedremo, uno per uno, come utilizzare le varie proprietà e metodi dei validator controls. Ogni comando verrà correlato con un esempio.

Controllo RequiredFieldValidator

Questo comando controlla se nel controllo input non sia vuoto. La convalida fallisce se il valore del controllo non è cambiato rispetto al valore di default. Il valore di default è una stringa vuota (??), che indica che deve essere inserito un valore nel controllo input per passare la convalida.

Eventuali spazi bianchi all'inizio o alla fine del valore inserito vengono automaticamente eliminati prima della convalida, per evitare che la convalida venga bypassata inserendo uno spazio.

Ecco un esempio:

<html>
<body>

<h3><a id="title_3"></a>RequiredFieldValidator</h3>

<form runat="server">

Nome:
<asp:TextBox id="Text1" runat="server"/>

<asp:RequiredFieldValidator id="RequiredFieldValidator1"
   ControlToValidate="Text1"
   Text="il campo non può essere vuoto!"
   Display="Dynamic"
   runat="server"/>

 <asp:Button id="Button1" runat="server"
Text="Convalida"/>

</form>

</body>
</html> 

Controllo CompareValidator

Questo comando controlla che il valore inserito in un controllo input sia uguale al valore inserito in un controllo input, utilizzando la proprietà ControlToCompare, o con una costante utilizzando la proprietà ValueToCompare.

È possibile utilizzare il comando CompareValidator per determinare se il valore inserito in un controllo input corrisponde ad un tipo specifico utilizzando la proprietà Type.

La proprietà Operator permette di specificare il tipo di comparazione tra i due campi di input (Equal, GreaterThen, LessThenorEqual, ecc.).

Se la proprietà Operator viene impostata su validatorCompareOperator.DataTypeCheck, il comando CompareValidator ignorerà le proprietà ControlToCompare e ValueToCompare, e indicherà se il valore inserito può essere convertito nel tipo specificato dalla proprietà Type.

Se il controllo input rimane vuoto nessuna funzione di convalidà verrà invocata e la convalida passerà il test. Per evitare questo tipo di problema è possibile associare allo stesso campo anche la convalida RequiredFieldValidator.

Ecco un esempio:

<html>
<head>
  <script runat="server">
  Sub Button_Click(sender As Object, e As EventArgs) 
   If Page.IsValid Then
   lblOutput.Text = "Risultato convalida: OK :-D"
   Else
   lblOutput.Text = "Risultato convalida: KO :-("
   End If
  End Sub

  Sub Operator_Index_Changed(sender As Object, e As EventArgs) 
   Compare1.Operator = CType(ListOperator.SelectedIndex, _
validatorCompareOperator)
   Compare1.Validate()
  End Sub
   Sub Type_Index_Changed(sender As Object, e As EventArgs) 
   Compare1.Type = CType(ListType.SelectedIndex, validatorDataType)
   Compare2.Type = CType(ListType.SelectedIndex, validatorDataType)
   Compare1.Validate()
  End Sub
  </script>
</head>
<body>
 
  <form runat="server">
 
  <h3 align="center">CompareValidator</h3>
  <p align="center">
  Inserire i due valori da comparare, selzionare un operatore e il tipo.

   Click "Convalida" per comparare i valori.
 
  <table cellpadding="10" align="center">
 
   <tr valign="top">
 
   <td>
 
     <h5>Stringa 1:</h5>
     <asp:TextBox id="TextBox1" runat="server"/>
 
     

 
     <asp:CompareValidator id="Compare1" 
     ControlToValidate="TextBox1" 
     ControlToCompare="TextBox2" 
     Type="String"
     EnableClientScript="False" 
     Text="Convalida fallita" 
     runat="server"/>
 
   </td>
 
   <td>
 
     <h5>Operatore di convalida:</h5>
 
     <asp:ListBox id="ListOperator" 
     OnSelectedIndexChanged="Operator_Index_Changed" 
     runat="server">
 
     <asp:ListItem Selected Value="Equal" >Equal</asp:ListItem>
     <asp:ListItem Value="NotEqual" >NotEqual</asp:ListItem>
     <asp:ListItem Value="GreaterThan" >GreaterThan</asp:ListItem>
     <asp:ListItem Value="GreaterThanEqual" >GreaterThanEqual</asp:ListItem>
     <asp:ListItem Value="LessThan" >LessThan</asp:ListItem>
     <asp:ListItem Value="LessThanEqual" >LessThanEqual</asp:ListItem>
     <asp:ListItem Value="DataTypeCheck" >DataTypeCheck</asp:ListItem>
 
     </asp:ListBox>
 
   </td>
 
   <td>
 
     <h5>Stringa 2:</h5>
     <asp:TextBox id="TextBox2" runat="server"/>
     

     <asp:CompareValidator id="Compare2" 
     ControlToValidate="TextBox2"  
     Operator="DataTypeCheck"
     EnableClientScript="False"
     Text="Tipo non valido" 
     runat="server"/>
     

     <asp:Button id="Button1"
     Text="Convalida"  
     OnClick="Button_Click"
 
     runat="server"/>
 
   </td>
   </tr>
 
   <tr>
   <td colspan="3" align="center">
 
     <h5>Tipo dati:</h5>
 
     <asp:ListBox id="ListType" 
     OnSelectedIndexChanged="Type_Index_Changed" 
     runat="server">
 
     <asp:ListItem Selected Value="String" >Stringa</asp:ListItem>
     <asp:ListItem Value="Integer" >Intero</asp:ListItem>
     <asp:ListItem Value="Double" >Double</asp:ListItem>
     <asp:ListItem Value="Date" >Data</asp:ListItem>
 
     </asp:ListBox>
   </td>
   </tr>
  </table>
 
  

  
  <asp:Label id="lblOutput" align="center" runat="server"/>
 
  </form>
 
</body>
</html>

Controllo RangeValidator

Questo comando controlla che il valore inserito in una casella di input sia compreso tra due valori, impostati rispettivamente nelle proprietà MinimumValue e MaximumValue.

I valori controllabili possono essere sia numerici, alfanumerici o date. La proprietà Type è utilizzata per specificare il tipo di dati da comparare.

Se il controllo input da convalidare è vuoto, la convalida non verrà effettuata

Se il controllo input rimane vuoto nessuna funzione di convalidà verrà invocata e la convalida passerà il test. Per evitare questo tipo di problema è possibile associare allo stesso campo anche la convalida RequiredFieldValidator.

Ecco un esempio:

<html>
<head>
 
  <script runat="server">
   Sub ButtonClick(sender As Object, e As EventArgs)
   If Page.IsValid Then
     Label1.Text="Risultato convalida: OK :-D"
   Else
     Label1.Text="Risultato convalida: KO :-("
   End If
   End Sub
  </script>
 
</head>
 
<body>
 
  <form runat="server">
 
   <h3><a id="title_2"></a>RangeValidator</h3>
 
   Inserisci un numero tra 1 e 30:
    <asp:TextBox id="TextBox1" runat="server"/>
 
   <asp:RequiredFieldValidator id="RequiredFieldValidator1"  
     ControlToValidate="TextBox1"
     Text="il campo non può essere vuoto!"
      EnableClientScript="false"
      Display="Dynamic"
     runat="server"/>

     <asp:RangeValidator id="Range1"
     ControlToValidate="TextBox1"
     MinimumValue="1"
     MaximumValue="30"
     Type="Integer"
     EnableClientScript="false"
     Text="Devi inserire un numero compreso tra 1 e 30"
      Display="Dynamic"
      runat="server"/>
 
   


     
     Inserisci una lettere tra c e k
 
   <asp:TextBox id="TextBox2" runat="server"/>
     
   <asp:RequiredFieldValidator id="RequiredFieldValidator2"  
     ControlToValidate="TextBox2"
     Text="il campo non può essere vuoto!"
      EnableClientScript="false"
      Display="Dynamic"
     runat="server"/>

     <asp:RangeValidator id="Range2"
     ControlToValidate="TextBox2"
     MinimumValue="c"
     MaximumValue="k"
     Type="String"
     EnableClientScript="false"
     Text="Devi inserire una lettere tra c e k"
      Display="Dynamic"
     runat="server"/>
 
   



   <asp:Label id="Label1" runat="server"/>
     
     


     
   <asp:Button id="Button1"
     Text="Convalida"
     OnClick="ButtonClick"
     runat="server"/>
 
  </form>
 
</body>
</html>

Controllo RegularExpressionValidator

Questo comando controlla che il valore inserito in una casella di input corrisponda ad una regular expression. È possibile per esempio valicare una determinata sequenza di caratteri, quali codici fiscali, email, numeri di telefono, ecc.

Se il controllo input rimane vuoto nessuna funzione di convalidà verrà invocata e la convalida passerà il test. Per evitare questo tipo di problema è possibile associare allo stesso campo anche la convalida RequiredFieldValidator.

Ecco un esempio:

<html>
<head>
  <script runat="server"> 
   Sub ValidateBtn_Click(sender As Object, e As EventArgs) 
    If Page.IsValid Then 
     lblOutput.Text = "Risultato convalida: OK :-D"
    Else 
     lblOutput.Text = "Risultato convalida: KO :-("
    End If
   End Sub
  </script>
 </head>
 <body>
 
  <h3><a id="title_4"></a>RegularExpressionValidator</h3>
  
 
  <form runat="server">
 
      <asp:Label id="lblOutput" runat="server"/>
         
           


 
      CAP:
      <asp:TextBox id="TextBox1" runat="server"/>
 
        <asp:RequiredFieldValidator id="RequiredFieldValidator1" 
        ControlToValidate="TextBox1"
        Text="il campo non può essere vuoto!"
            EnableClientScript="false"
            Display="Dynamic"
        runat="server"/>

      <asp:RegularExpressionValidator id="RegularExpressionValidator1" 
        ControlToValidate="TextBox1"
        ValidationExpression="\d{5}"
        EnableClientScript="false"
        ErrorMessage="Il CAP deve contenere 5 cifre"
        runat="server"/>

 
           


 
      <asp:Button text="Validate" OnClick="ValidateBtn_Click" runat="server"/>
 
  </form>

</body>
</html>

Controllo CustomValidator

Questo comando controlla che il valore inserito in una casella di input sia valido rispetto ad una funzione di convalida personalizzata creata dall'utente, per esempio una funzione per verificare se il numero immesso sia pari.

È possibile creare un comando di convalida personalizzato sia lato-server, sia lato-client; naturalmente il controllo lato-client richiede un browser compatibile DHTML. La convalida lato-client sarà sempre eseguita prima di quella lato-server.

Per creare una funzione di convalida lato-server è necessario settare nella proprietà OnServervalidator il nome della funzione di convalida. La stringa da convalidare viene letta dalla proprietà Value dell'oggetto ServerValidateEventArgs della funzione stessa. Il risultato della convalida va memorizzato nella proprietà IsValid dell'oggetto ServerValidateEventArgs.

Per creare una funzione di convalida lato-client è necessario settare nella proprietà ClientvalidatorFunction il nome della funzione di convalida.

Utilizzando JavaScript come linguaggio di programmazione la funzione utilizzerà la seguente sintassi:

Function validatorFunctionName (source, arguments)

Mentre nel caso di Vbscirpt:

Sub validatorFunctionName (source, arguments)

Come per la convalida lato-server, anche la convalida lato-client utilizzerà la proprietà Value del parametro arguments per leggere il valore da convalidare; il risultato della convalidà andrà memorizzato nella proprietà IsValid.

Per evitare che qualche malintenzionato cerchi di evitare la convalida lato-client, magari disabilitando gli script nel proprio browser, è sempre consigliato creare la stessa funzione anche sul lato-server.

Se il controllo input rimane vuoto nessuna funzione di convalidà verrà invocata e la convalida passerà il test. Per evitare questo tipo di problema è possibile associare allo stesso campo anche la convalida RequiredFieldValidator.

Ecco un esempio:

<html>
<head>
  <script runat="server">
   Sub ValidateBtn_OnClick(sender As object, e As EventArgs)
   If Page.IsValid Then 
     lblOutput.Text = "OK il numero inserito è dispari"
   Else 
     lblOutput.Text = "Attenzione: il numero inserito non è dispari"
   End If
   End Sub
   Sub Servervalidator (source As object, arguments As ServerValidateEventArgs)
 
   Dim num As Integer = Integer.Parse(arguments.Value)
   arguments.IsValid = ((num mod 2) <> 0)
 
   End Sub
  </script>

  <script language="javascript">
  <!--
  function ClientValidate(source, arguments)
  {
   if ((arguments.Value % 2) != 0)
   arguments.IsValid=true;
   else
   arguments.IsValid=false;
  }
  // -->
</script>
 
</head>
<body>
  <form runat="server">
   <h3><a id="title_2"></a>CustomValidator</h3>
   <asp:Label id=lblOutput runat="server" 
     Text="Inserisci un numero dispari:" />
   <asp:TextBox id="Text1" runat="server" />

 
   <asp:RequiredFieldValidator id="RequiredFieldValidator1"  
     ControlToValidate="Text1"
     Text="il campo non può essere vuoto!"
      Display="Dynamic"
     runat="server"/>

     <asp:CustomValidator id="CustomValidator1"
     ControlToValidate="Text1"
     ClientvalidatorFunction="ClientValidate"
     OnServerValidate="Servervalidator"
     ErrorMessage="Attenzione: il numero non è dispari"
     runat="server"/>

   
   <asp:Button id="Button1"
     Text="Convalida" 
     OnClick="ValidateBtn_OnClick" 
     runat="server"/>
  </form>
 
</body>
</html>

Controllo ValidationSummary

Questo comando è utilizzato per visualizzar l'elenco degli errori riscontrati da tutti i validator controls. Il sommario degli errori può essere visualizzato in diversi modi: elenco, punto elenco o paragrafo, a seconda del modo in cui viene impostata la proprietà DisplayMode; il comando visualizzerà il testo contenuto nella proprietà ErrorMessage di ogni comando che non supera il test di convalida.

Un'altra proprietà utile di questo comando è ShowMessageBox che, se impostata su True, visualizza un finestra di dialogo alert sul client con il sommario degli errori.

Ecco un esempio:

 <html>
<head></head>
<body>

  <h3><a id="title_4"></a>ValidationSummary</h3>
  

  <form runat="server">

  <table cellpadding="10">
  <tr>
  <td>

  <table cellpadding="10">

   <tr>
   <td align="right">
   Seleziona un opzione:
   </td>
   <td>

   <asp:RadioButtonList id="RadioButtonList1" 
   RepeatLayout="Flow"
   runat=server>
   <asp:ListItem>Opzione 1</asp:ListItem>
   <asp:ListItem>Opzione 2</asp:ListItem>
   </asp:RadioButtonList>

   </td>

   <td align="middle" rowspan="1">

   <asp:RequiredFieldValidator
   id="RequiredFieldValidator1"
   ControlToValidate="RadioButtonList1"
   ErrorMessage="Nessuna opzione selezionata."
   Display="Static"
   InitialValue="" 
   Width="100%" 
   Text="* !!! *"
   runat="server"/>

   </td>
   </tr>

   <tr>
   <td align="right">

   Inserisci un testo:
   </td>

   <td>
   <asp:TextBox id="TextBox1" 
   runat="server" />
   </td>

   <td>
   <asp:RequiredFieldValidator
   id="RequiredFieldValidator2"
   ControlToValidate="TextBox1" 
   ErrorMessage="Nessun testo inserito."
   Display="Static"
   Width="100%"
   Text="* !!! *"
   runat=server/>
   </td>
   </tr>

   <tr>
   <td></td>
   <td>
   <asp:Button id="Button1" 
   Text="Convalida" 
   runat=server />
   </td>
   <td></td>
   </tr>
  </table>

  </td>
  <td>
  <table cellpadding="20">
   <tr>
   <td>

   <asp:ValidationSummary id="valSum" 
   DisplayMode="BulletList"
   EnableClientScript="true"
   HeaderText="Errori riscontrati:"
   runat="server"/>
   </td>
   </tr>
  </table>

  </td>
  </tr>
  </table>

  </form>

</body>
</html>

Conclusioni

In questo articolo abbiamo visto come utilizzare i validator controls di ASP.NET, controlli molto utili per evitare di scrivere tutto il codice di controllo di convalida sia lato-server che lato-client.

L'espandibilità di questo comandi inoltre è garantita dal comando CustomValidator che permette di inserire una convalida personalizzata.

Insomma che dire, largo alla fantasia...

Torna su
Categoria

ASP.NET (7)


Autore

Asp.Net Italia


Data pubblicazione.

27/08/2012



Recensioni

Articolo non ancora recensito