Desarrollo de Aplicaciones Web Con AngularJS y Validacion de Formularios

 

AngularJS ofrece validacion de formularios del lado cliente, y es un framework que se adapta bien a los procesos de formularios y validaciones de datos.


AngularJS monitoriza el estado del formulario y los campos de entrada (input, textarea, select), y permite notificar al usuario acerca del estado actual.

AngularJS tambien puede tomar la informacion de eventos y estados como modificaciones, focus de campos de entrada etc, etc.

Se puede usar atributos standard de HTML5 para validar entradas, o tu puedes hacer tus propias funciones de tus validaciones.

Nota .- La validacion de lado cliente no puede asegurar la entrada de datos de usuario solo en el cliente. En el lado servidor es tambien necesario hacer validacion de datos.

  • valores requeridos

Se Usa validacion con el  atributo required en HTML5  para especificar que los campos de entrada debe ser llenado.

  • input de email

Se usa el type email en HTML5 para especificar que el valor debe ser un email.

  • Estado de Formulario y el estado de Entrada de datos

AngularJS es constantemente actualizado el estado de ambos en el formulario y las entradas de datos.

Las entradas de datos tienen los siguientes estados:

$untouched El campo no fue usado todavia.
    $touched El campo fue usado
    $pristine El campo no fue modificado
    $dirty El campo fue modificado
    $invalid El contenido del campo no es valido
    $valid El contenido del campo es valido

Hay varias propiedades del campo de entrada de datos, y son o bien falso o true.
Se puede usar los estados para mostrar  mensajes al usuario.

  • CSS Classes

AngularJS añade CSS classes al formulario y las entradas de datos dependiendo de los estados.
Las clases siguientes se puede añadir o remover de los campos de entrada de datos:

ng-untouched El campo no ha sido usado todavia
ng-touched El campo ha sido usado todavia
ng-pristine El campo no ha sido modificado todavia
ng-dirty El campo ha sido modificado todavia
ng-valid El contenido del campo es valido
ng-invalid El contenido del campo no es valido
ng-valid-key Una tecla por cada validacion. Ejemplo: ng-valid-required, es util cuando hay mas de una cosa que debe ser validada
ng-invalid-key Ejemplo: ng-invalid-required

Las clases siguientes se puede añadir o remover de los formularios:

ng-pristine El campo no ha sido modificado todavia
ng-dirty El campo ha sido modificado todavia
ng-valid El contenido del campo es valido
ng-invalid El contenido del campo no es valido
ng-valid-key Una tecla por cada validacion. Ejemplo: ng-valid-required, es util cuando hay mas de una cosa que debe ser validada
ng-invalid-key Ejemplo: ng-invalid-required

Las clases son removidas si el valor que representa es falso.
Añadir estilos para cada clase es dar a la aplicacion una mejor y mas intuitiva interfaz de usuario.

  • Validacion especifica

Para crear tu propia funcion de validacion es un poco mas complejo.
Se tiene que añadir una nueva directiva para tu aplicacion, y tratar de validar dentro de una funcion con una cantidad especifica de argumentos.

escrito por christian portilla pauca

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s