Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Convalidare un form

Un esempio concreto di validazione
Un esempio concreto di validazione
Link copiato negli appunti

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"   >
  <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>

Ti consigliamo anche