Una vez que hemos visto los formularios hay que validarlos, ya que ahora mismo podíamos poner en nuestros campo de texto lo que quisiéramos.
Por suerte mucho del trabajo, lo que incluye algunas expresiones regulares, esta ya incluido en el propio html5, donde poniendo el tipo de input se determina que es lo que tiene que introducirse.
Además angular puede ayudar en este proceso, pero de todas formas hay que tener en cuenta que las validaciones en cliente no son lo suficientemente seguras y se deberá de hacerlas en el lado del servidor.
Veamos el ejemplo:
El submit esta desactivado mientras que no este todo correcto, es decir mientras en el formulario no se cumplan las condiciones de todos los inputs, y una vez que este se activa al hacer click en el aparece el ultimo párrafo mostrando los datos.
En este ejemplo podemos ver como se realizan las validaciones básicas, mezclándolo con la directiva ng-disabled y trabajando además con los eventos, ya que cuando se hace click en un evento, aparece el texto con la directiva ng-hiden.
Por suerte mucho del trabajo, lo que incluye algunas expresiones regulares, esta ya incluido en el propio html5, donde poniendo el tipo de input se determina que es lo que tiene que introducirse.
Además angular puede ayudar en este proceso, pero de todas formas hay que tener en cuenta que las validaciones en cliente no son lo suficientemente seguras y se deberá de hacerlas en el lado del servidor.
Veamos el ejemplo:
<!DOCTYPE html>
<html>
<body>
<h2>Ejemplo de validación</h2>
<div ng-app="" ng-controller="validateCtrl" >
<form name="myForm" novalidate>
<p>Nombre de usuario:</p>
<p><input type="text" name="usuario" ng-model="usuario" required>
<span style="color:red" ng-show="myForm.usuario.$dirty && myForm.usuario.$invalid">
<span ng-show="myForm.usuario.$error.required">El nombre de usuario es requerido.</span>
</span>
</p>
<p>Email:</p>
<p><input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email requerido.</span>
<span ng-show="myForm.email.$error.email">La direccion de correo es incorrecta.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.usuario.$dirty && myForm.usuario.$invalid ||
myForm.email.$dirty && myForm.email.$invalid" ng-click="toggle()">
</p>
</form>
<p ng-hide="mostrar">Nombre: {{usuario}}, email: {{email}}
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
function validateCtrl($scope) {
$scope.usuario = 'Paco Perez';
$scope.email = 'Paco.perez@gmail.com';
$scope.mostrar = true;
$scope.toggle = function() {
$scope.mostrar = !$scope.mostrar;
};
}
</script>
</body>
</html>
Cuando se ejecuta aparecen dos campos de texto los cuales tienen su propio tipo, a continuación aparece un span de color rojo que aparece solo si el texto cumple con las condiciones $dirty o $invalid, escogiendo dependiendo la condición que se cumpla.El submit esta desactivado mientras que no este todo correcto, es decir mientras en el formulario no se cumplan las condiciones de todos los inputs, y una vez que este se activa al hacer click en el aparece el ultimo párrafo mostrando los datos.
En este ejemplo podemos ver como se realizan las validaciones básicas, mezclándolo con la directiva ng-disabled y trabajando además con los eventos, ya que cuando se hace click en un evento, aparece el texto con la directiva ng-hiden.
No hay comentarios:
Publicar un comentario