Cuando desarrollamos en Flex y ponemos un formulario para registro, muchas veces necesitamos obligar al usuario a completar datos importantes para nosotros, con AS3 nos ingeniamos para verificar dicha información sin problemas, pero con Flex podemos utilizar las etiquetas de validación y ahorrarnos un poco de código. De una manera fácil, rápida y limpia logramos obtener los datos que requerimos de nuestro usuario, para eso existen las etiquetas StringValidator y EmailValidator.
Para eso crearemos 3 campos de texto, 3 label y un botón:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:TextInput x="110" y="10" id="txt_nombre"/>
<mx:TextInput x="110" y="40" id="txt_apellido"/>
<mx:TextInput x="110" y="70" id="txt_email"/>
<mx:Label x="10" y="12" text="Nombre:" width="92" fontWeight="bold" textAlign="right"/>
<mx:Label x="10" y="42" text="Apellido" width="92" fontWeight="bold" textAlign="right"/>
<mx:Label x="10" y="72" text="Email:" width="92" fontWeight="bold" textAlign="right"/>
<mx:Button x="201" y="100" label="Validar"/>
</mx:Application>
Ahora agregaremos una etiqueta [b]StringValidator[/b] que nos permite requerir los campos que queremos que el usuario complete, para eso le ponemos un id especifico para el campo a requerir, un source para enlazar este validador con el campo de texto deseado, la propiedad a validar y el mensaje que queremos mostrar
<mx:StringValidator
id="nombreValidator"
requiredFieldError="Complete su nombre"
source="{txt_nombre}"
property="text"
/>
Entonces cuando pasemos del campo 1 al campo 2 saldrá el mensaje:
Repetimos el proceso para nuestro campo Apellido
<mx:StringValidator
id="apellidoValidator"
requiredFieldError="Complete su apellido"
source="{txt_apellido}"
property="text"
/>
Y ahora viene lo bonito, como validar el email aveces tan engorroso, pues con una etiqueta [b]EmailValidator[/b] que nos permite personalizar los mensajes dependiendo del error que tenga al digitar
<mx:EmailValidator
id="emailValidator"
requiredFieldError="Complete su email"
source="{txt_email}"
property="text"
/>
Sin embargo, si dejamos así el código, nos validará el texto mostrando nuestro mensaje personalizado, pero si queremos que valide el @ o el dominio, por defecto saldrá los mensajes de Flex, asi que para agregar nuestros mensajes personalizados agregamos:
<mx:EmailValidator
id="emailValidator"
requiredFieldError="Complete su email"
source="{txt_email}"
property="text"
invalidCharError="Caracteres inválidos"
invalidDomainError= "El dominio no es válido"
missingAtSignError="Necesita una @ en su email"
missingPeriodInDomainError="Necesita un nombre de dominio"
/>
Listo, ahora si queremos procesar la información para enviarla, agregamos una función que verifique q todo este true en nuestros validadores
<mx:Script>
//importamos las clases necesarias
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
private function validarMensaje():void {
//camputamos los valores de cada validador
var validarNombre:ValidationResultEvent =nombreValidator.validate();
var validarApellido:ValidationResultEvent =apellidoValidator.validate();
var validarEmail:ValidationResultEvent =emailValidator.validate();
//verificamos si todos cumplen
if (validarNombre.type == ValidationResultEvent.VALID
&&
validarApellido.type == ValidationResultEvent.VALID
&&
validarEmail.type == ValidationResultEvent.VALID )
{
//mostramos un mensaje si TODO esta OK
Alert.show("la información está perfecto");
}
else
{
//mostramos un mensaje si no cumple la validación
Alert.show("No se puede procesar su información");
}
}
</mx:Script>
Donde nombreValidator.validate() nos captura el resultado actual de nuestro validador(type) y lo comparamos con la propiedad VALID. Logrando hacer la validación de los 3 campos de textos y permitiendo, en este caso, mostrar un Alert con un mensaje positivo, de lo contrario mostrará un mensaje donde indica que no puede ser procesado la información y además colocará de color rojo los campos que no cumplieron la validación.
Y terminamos, ahora tenemos un formulario con validadores independientes por cada campo de texto y ademas verificamos para poder procesar la informacion, el codigo completo esta aqui