Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:08_formularios:02_validaciones [2014/08/27 20:46]
admin [url]
unidades:08_formularios:02_validaciones [2014/09/16 21:01] (actual)
admin
Línea 1: Línea 1:
 ====== 8.2 Validaciones ====== ====== 8.2 Validaciones ======
-Acabamos de ver como saber si un campo o formulario es o no válido. En este tema vamos a ver las validaciones estándar que tiene angular dejando para la unidad [[unidades:​13_formulariosadv:​00_start]] la creación de nuevas validaciones.+Acabamos de ver cómo saber si un campo o formulario es o no válido. En este tema vamos a ver las validaciones estándar que tiene angular dejando para la unidad [[unidades:​13_formulariosadv:​00_start]] la creación de nuevas validaciones.
  
 ===== Tipos de Validaciones ===== ===== Tipos de Validaciones =====
 AngularJs dispone de 9 tipos de validaciones distintas: AngularJs dispone de 9 tipos de validaciones distintas:
-  * ''​email'':​ El campo debe tener el formato de un correo electrónico.+  * ''​email'':​ El campo debe tener el formato de un correo electrónico
   * ''​max'':​ El campo debe tener un valor máximo   * ''​max'':​ El campo debe tener un valor máximo
   * ''​maxlength'':​ El campo debe tener un nº máximo de caracteres   * ''​maxlength'':​ El campo debe tener un nº máximo de caracteres
Línea 14: Línea 14:
   * ''​url'':​ El campo debe tener el formato de una URL   * ''​url'':​ El campo debe tener el formato de una URL
  
-<note warning>​Para que todas estas validaciones funcionen es necesario que tanto el formulario ​como en ''<​input>''​ tengan la propiedad ''​name''​</​note>​+<note warning> 
 +Para que todas estas validaciones funcionen es necesario que tanto el ''<​form>''​como el ''<​input>''​, ''<​select>''​ , etc. tengan la propiedad ''​name''​.
  
-Pasemos ahora a ver como se aplican cada una de ellas.+<sxh html> 
 +<form name="​nombre">​ 
 +</​form>​ 
 + 
 +<input name="​nombre">​ 
 + 
 +<select name="​nombre">​ 
 +</​sxh>​ 
 +</​note>​ 
 + 
 +Pasemos ahora a ver cómo se aplican cada una de ellas.
  
 ==== email ==== ==== email ====
Línea 26: Línea 37:
  
 ==== max ==== ==== max ====
-Solo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​. +Sólo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​. 
-Deberemos indicar la directiva ''​max="​valor"''​. Siendo ​''​valor''​ el valor máximo que puede tener.+Deberemos indicar la directiva ''​max="​valor"''​, siendo ​''​valor''​ el valor máximo que puede tener.
  
 <sxh html> <sxh html>
Línea 33: Línea 44:
 </​sxh>​ </​sxh>​
 ==== maxlength ==== ==== maxlength ====
-Solo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​ o ''​type="​text"''​. +Sólo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​ o ''​type="​text"​'' ​ o ''<​textarea>​''​. 
-Deberemos indicar la directiva ''​ng-maxlength="​valor"''​. Siendo ​''​valor''​el tamaño máximo que puede tener en caracteres.+Deberemos indicar la directiva ''​ng-maxlength="​valor"''​, siendo ​''​valor''​ el tamaño máximo que puede tener en caracteres.
  
 <sxh html> <sxh html>
Línea 41: Línea 52:
  
 ==== min ==== ==== min ====
-Solo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​.+Sólo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​.
  
-Deberemos indicar la directiva ''​min="​valor"''​. Siendo ​''​valor''​el valor mínimo que puede tener.+Deberemos indicar la directiva ''​min="​valor"''​, siendo ​''​valor''​ el valor mínimo que puede tener.
  
 <sxh html> <sxh html>
Línea 49: Línea 60:
 </​sxh>​ </​sxh>​
 ==== minlength ==== ==== minlength ====
-Solo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​ o ''​type="​text"''​. +Sólo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​ o ''​type="​text"​'' ​ o ''<​textarea>​''​. 
-Deberemos indicar la directiva ''​ng-minlength="​valor"''​. Siendo ​''​valor''​el tamaño mínimo que puede tener en caracteres.+Deberemos indicar la directiva ''​ng-minlength="​valor"''​, siendo ​''​valor''​ el tamaño mínimo que puede tener en caracteres.
  
 <sxh html> <sxh html>
Línea 64: Línea 75:
  
 ==== pattern ==== ==== pattern ====
-Solo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​ , ''​type="​text"''​ o ''​type="​email"''​. +Sólo se aplica a ''<​input>''​ cuyo  ''​type="​number"''​ , ''​type="​text"''​ o ''​type="​email"​'' ​ o ''<​textarea>​''​. 
-Deberemos indicar la directiva ''​ng-pattern="​valor"''​. Siendo ​''​valor''​la expresión regular que tiene que cumplir el valor+Deberemos indicar la directiva ''​ng-pattern="​valor"''​, siendo ​''​valor''​ la expresión regular que tiene que cumplir el valor.
  
 <sxh html> <sxh html>
Línea 77: Línea 88:
 </​note>​ </​note>​
  
-Esta directiva permite que la expresión regular esté en una propiedad del ''​$scope'' ​en ese caso se debe poner así:+Esta directiva permite que la expresión regular esté en una propiedad del ''​$scope''​. En ese caso se debe poner así:
  
 <sxh html> <sxh html>
Línea 89: Línea 100:
  
 ==== required ==== ==== required ====
-Se aplica a cualquier ''<​input>''​.+Se aplica a cualquier ''<​input>''​ , ''<​select>''​ o ''<​textarea>''​.
  
 Se debe poner la directiva ''​required''​ o ''​ng-required''​. Se debe poner la directiva ''​required''​ o ''​ng-required''​.
Línea 103: Línea 114:
 </​sxh>​ </​sxh>​
  
-Es este segundo ejemplo deberíamos tener en el ''​$scope'' ​para que fuera requerido ​:+En este segundo ejemplo ​para que fuera requerido ''​model.nombre'', ​deberíamos tener en el ''​$scope''​ :
 <sxh js> <sxh js>
 $scope.requeridoNombre=true $scope.requeridoNombre=true
 </​sxh>​ </​sxh>​
-para que no lo fuera:+ 
 +para que **no** fuera requerido ''​model.nombre'',​ deberíamos tener en el ''​$scope'' ​:
 <sxh js> <sxh js>
 $scope.requeridoNombre=false $scope.requeridoNombre=false
Línea 120: Línea 132:
  
 ===== Comprobando las validaciones ===== ===== Comprobando las validaciones =====
-Ahora que ya sabemos ​como poner las validaciones falta saber si una validación ha fallado. Hay dos formas de saberlo:+Ahora que ya sabemos ​cómo poner las validaciones falta saber si una validación ha fallado. Hay dos formas de saberlo:
   * Sobre un campo   * Sobre un campo
   * Sobre un tipo de validación   * Sobre un tipo de validación
Línea 129: Línea 141:
 === Ejemplo 1 === === Ejemplo 1 ===
  
-Si queremos saber si ha fallado la validación ​de ''​required''​ en el campo ''​nombre''​ del formulario ''​miFormulario''​ deberemos ver el valor de la siguiente expresión:+Si queremos saber si ha fallado la validación ''​required''​ en el campo ''​nombre''​ del formulario ''​miFormulario''​ deberemos ver el valor de la siguiente expresión:
 <sxh js> <sxh js>
 $scope.miFormulario.nombre.$error.required $scope.miFormulario.nombre.$error.required
Línea 136: Línea 148:
   * Si vale ''​true''​ es que la validación ha fallado y no está el valor   * Si vale ''​true''​ es que la validación ha fallado y no está el valor
   * Si vale ''​false''​ es que la validación es correcta y tiene valor   * Si vale ''​false''​ es que la validación es correcta y tiene valor
-  * Si vale ''​undefined''​ es que no se está validando la validación ​de ''​required''​+  * Si vale ''​undefined''​ es que no se está validando la validación ''​required''​
  
 === Ejemplo 2 === === Ejemplo 2 ===
-Si queremos saber si ha fallado la validación ​de ''​email''​ en el campo ''​correo''​ del formulario ''​miFormulario''​ deberemos ver el valor de la siguiente expresión:+Si queremos saber si ha fallado la validación ''​email''​ en el campo ''​correo''​ del formulario ''​miFormulario''​ deberemos ver el valor de la siguiente expresión:
 <sxh js> <sxh js>
 $scope.miFormulario.correo.$error.email $scope.miFormulario.correo.$error.email
Línea 148: Línea 160:
   * Si vale ''​undefined''​ es que no se está validando la validación de ''​email''​   * Si vale ''​undefined''​ es que no se está validando la validación de ''​email''​
  
-<note tip>​Gracias a que JavaScript permite saber que propiedades hay en un objeto podríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</​note>​+Lo que nos retorna la expresión ''​$scope.miFormulario.nombre''​ o ''​$scope.miFormulario.correo''​ son objetos de tipo [[https://​docs.angularjs.org/​api/​ng/​type/​ngModel.NgModelController|NgModelController]] sobre los que podremos acceder a todas sus propiedades. 
 + 
 +<note tip>​Gracias a que JavaScript permite saber qué propiedades hay en un objetopodríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</​note>​
  
 ==== Sobre un tipo de validación ==== ==== Sobre un tipo de validación ====
 +Dado un tipo de validación podemos saber cuántos campos no cumplen esa validación.Para explicarlo vamos a hacerlo con unos ejemplos:
 +
 +=== Ejemplo 1 ===
 +Si queremos saber cuántos campos han fallado la validación de ''​required''​ del formulario ''​miFormulario''​ deberemos ver el valor de la siguiente expresión:
 +<sxh js>
 +$scope.miFormulario.$error.required
 +</​sxh>​
 +El resultado es esta expresión ​
 +
 +  * Si vale ''​false''​ es que no hay ningún campo que incumpla dicha validación.
 +  * Si vale un array. El contenido del array son objetos de la clase [[https://​docs.angularjs.org/​api/​ng/​type/​ngModel.NgModelController|NgModelController]] correspondientes a cada uno de los campos en los que ha fallado esa validación
 +  * Si vale ''​undefined''​ es que ningún campo está validando esa validación. En nuestro ejemplo es que nadie ha puesto ''​required''​ en ningún campo.
 +
 +=== Ejemplo 2 ===
 +Si queremos saber cuántos campos han fallado la validación de ''​email''​ del formulario ''​miFormulario''​ deberemos ver el valor de la siguiente expresión:
 +<sxh js>
 +$scope.miFormulario.$error.email
 +</​sxh>​
 +El resultado es esta expresión ​
 +
 +  * Si vale ''​false''​ es que no hay ningún campo que incumpla dicha validación.
 +  * Si vale un array. El contenido del array son objetos de la clase [[https://​docs.angularjs.org/​api/​ng/​type/​ngModel.NgModelController|NgModelController]] correspondientes a cada uno de los campos en los que ha fallado esa validación.
 +  * Si vale ''​undefined''​ es que ningún campo está validando esa validación. En nuestro ejemplo significaría que no hay campos del tipo ''​type="​email"''​.
 +
 +<note tip>​Gracias a que JavaScript permite saber qué propiedades hay en un objeto, podríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</​note>​
 +
 +===== novalidate =====
 +Lo último que nos queda por contar es el atributo ''​novalidate''​ que debemos poner en el tag ''<​form>''​.
 +
 +Este atributo se pone para evitar que el propio navegador se ponga a hacer sus propias validaciones con sus propios mensajes o estilos CSS y que choquen con las que está haciendo AngularJS.
 +
 +<sxh html>
 +<form name="​miFormulario"​ novalidate >
 +</​form>​
 +</​sxh>​
 +
 +<note important>​
 +Recuerda poner el atributo ''​novalidate''​ en el tag ''<​form>''​.
 +</​note>​
 ===== Ejemplo ===== ===== Ejemplo =====
  
Línea 156: Línea 209:
  
 ===== Referencias ===== ===== Referencias =====
 +  * [[https://​docs.angularjs.org/​api/​ng/​type/​form.FormController|/​ API Reference / ng / type / form.FormController]]
 +  * [[https://​docs.angularjs.org/​guide/​forms|/​ Developer Guide / Forms]]
 +  * [[https://​docs.angularjs.org/​api/​ng/​type/​ngModel.NgModelController|/​ API Reference / ng / type / ngModel.NgModelController]]
unidades/08_formularios/02_validaciones.1409165209.txt.gz · Última modificación: 2014/08/27 20:46 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0