Convalidare un form

Riprendiamo il nostro primo form di esempio e aggiungiamo alcuni validatori ai campi. Esaminiamo una semplice tecnica per inibire il pulsante di invio del form finché questo non risulti completamente valido.

Iniziamo scrivendo i nostri validator e i relativi vincoli da applicare ai campi:

<fx:Declarations>
  <mx:StringValidator id="useridValidator"
                      source="{userid}" property="text"
                      minLength="8" maxLength="15" />
  <mx:NumberValidator id="ageValidator"
                      source="{age}" property="text"
                      precision="0" allowNegative="false"
                      minValue="18" maxValue="100" />   
  <mx:EmailValidator  id="emailValidator" source="{email}" property="text" />
  <mx:PhoneNumberValidator id="phoneValidator" source="{phone}"  property="text" />
</fx:Declarations>

La logica che vogliamo attuare prevede che il bottone di invio sia inizalmente disabilitato per poi essere abilitato una volta compilato il form. Per questo impostiamo la proprietà enabled="false" sul Button.

Per abilitare il bottone dobbiamo verificare che tutto il form sia valido e dobbiamo farlo ogni volta che modifichiamo un campo. Per questo aggiungiamo ad ogni campo un nuovo handler, per l'evento On change. Lo possiamo fare in modalità Design, utilizzando le proprietà e scrivendo mayEnableButton(), nel campo On change.

Il codice MXML risultante sarà:

<mx:Form x="0" y="0" width="250" height="170" >
  <mx:FormItem label="Nome utente">
    <s:TextInput id="userid" change="mayEnableButton()"/>
  </mx:FormItem>
  <mx:FormItem label="Età">
    <s:TextInput id="age" change="mayEnableButton()"/>
  </mx:FormItem>
  <mx:FormItem label="e-mail">
    <s:TextInput id="email"  change="mayEnableButton()"/>
  </mx:FormItem>
  <mx:FormItem label="Telefono">
    <s:TextInput id="phone"  change="mayEnableButton()"/>
  </mx:FormItem>
  <mx:FormItem id="sumbit" >
    <s:Button label="Invia" click="submit_clickHandler(event)"/>
  </mx:FormItem>
</mx:Form>

Prima di inserire il codice per gli event handler introduciamo il metodo validateAll(): un metodo statico della classe Validator, quindi ereditato da tutti i validatori, che ha la seguente firma:

public static function validateAll(validators:Array):Array

Questo metodo ci permette di esaminare lo stato di una collezione di validatori (l'array Validators). Quello che otteniamo è una collezione di oggetti ValidationResultEvent, che contengono gli eventuali messaggi di errore.

Possiamo sfruttare questo metodo per gestire la visualizzazione degli avvisi in un apposito riquadro, o più semplicemente (come facciamo), possiamo utilizzare queste informazioni per abilitare o disabilitare il bottone di invio del form (grazie alla proprietà enabled):

bottone.enabled = validateAll([validatore1,validatore2,....,validatoren).length == 0;

Quest'ultima operazione impedisce l'invio dei dati al server se tutte le condizioni di validazione non sono soddisfatte. Non ci resta che completare il codice:

<fx:Script>
<![CDATA[
  import spark.events.TextOperationEvent;
  import mx.validators.Validator;
  import mx.controls.Alert;
  import mx.validators.ValidationResult;
  import mx.events.ValidationResultEvent;
  
  protected function submit_clickHandler(event:MouseEvent):void
  {
    Alert.show("Form valido. Invio Dati");
  }
  
  private function mayEnableButton():void
  {
    submit.enabled = (Validator.validateAll([useridValidator, ageValidator, emailValidator, phoneValidator]).length == 0);
  }
]]>
</fx:Script>