Muestra las diferencias entre dos versiones de la página.
unidades:08_formularios:02_validaciones [2014/08/27 20:26] admin |
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 22: | Línea 33: | ||
<sxh html> | <sxh html> | ||
- | <input type="email" ng-model="model.email" name="email" > | + | <input type="email" ng-model="model.correo" name="correo" > |
</sxh> | </sxh> | ||
==== 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> | ||
- | o para que no lo fuera: | + | |
+ | y 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 116: | Línea 128: | ||
<sxh html> | <sxh html> | ||
- | <input type="email" ng-model="model.email" name="email" > | + | <input type="url" ng-model="model.sitioweb" name="sitioweb" > |
</sxh> | </sxh> | ||
+ | ===== Comprobando las validaciones ===== | ||
+ | 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 tipo de validación | ||
+ | |||
+ | ==== Sobre un campo ==== | ||
+ | Si sabemos un campo, podemos averiguar las validaciones que ha fallado. Para explicarlo vamos a hacerlo con unos ejemplos: | ||
+ | |||
+ | === Ejemplo 1 === | ||
+ | |||
+ | 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> | ||
+ | $scope.miFormulario.nombre.$error.required | ||
+ | </sxh> | ||
+ | |||
+ | * 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 ''undefined'' es que no se está validando la validación ''required'' | ||
+ | |||
+ | === Ejemplo 2 === | ||
+ | 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> | ||
+ | $scope.miFormulario.correo.$error.email | ||
+ | </sxh> | ||
+ | |||
+ | * Si vale ''true'' es que la validación ha fallado y el valor no es un correo electrónico | ||
+ | * Si vale ''false'' es que la validación es correcta y el valor es un correo electrónico | ||
+ | * Si vale ''undefined'' es que no se está validando la validación de ''email'' | ||
+ | |||
+ | 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 objeto, podríamos recorrer todas las propiedades para tener una lista de todo lo que está fallando.</note> | ||
+ | |||
+ | ==== 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 124: | 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]] |