Validación del formulario AngularJS al enviar: ejemplo de registro
james hartman
Validación de formulario en AngularJS
Validación de formularios En AngularJS, es el proceso de garantizar que los datos ingresados en un formulario sean correctos y completos. Cuando un usuario envía el formulario, primero se realiza una validación antes de que los detalles se envíen al servidor. El proceso de validación garantiza, en la mayor medida posible, que los detalles de los campos de entrada se ingresen de la manera correcta.
En un ejemplo del mundo real, supongamos que existe un sitio que requiere que se complete un formulario de registro antes de obtener acceso completo al mismo. La página de registro tendría campos de entrada para el nombre de usuario, la contraseña, la dirección de correo electrónico, etc.
Por ejemplo, la identificación del correo electrónico siempre debe tener el formato nombre de usuario@sitio.dominio; Si alguien ingresa solo el nombre de usuario en la dirección de correo electrónico, lo ideal sería que la validación fallara. Por lo tanto, la validación consiste en realizar estas comprobaciones básicas antes de enviar los detalles al servidor para su posterior procesamiento.
Validación de formularios usando HTML5
La validación de formularios es el proceso de validación previa de la información ingresada en un formulario web por el usuario antes de enviarla al servidor. Siempre es mejor validar la información del lado del cliente. Esto se debe a que agrega menos gastos generales si al usuario se le tuviera que presentar el formulario nuevamente si la información ingresada era incorrecta.
Echemos un vistazo a cómo se puede realizar la validación de formularios AngularJS en HTML5.
En nuestro ejemplo, mostraremos al usuario un formulario de registro simple en el que el usuario deberá ingresar detalles como nombre de usuario, contraseña, identificación de correo electrónico y edad.
El formulario contará con controles de validación para asegurar que el usuario ingrese la información de manera adecuada.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Explicación del código
- Para el tipo de entrada de texto, utilizamos el atributo "requerido". Esto significa que el cuadro de texto no puede estar vacío cuando se envía el formulario y debe haber algún tipo de texto en el cuadro de texto.
- El siguiente tipo de entrada es contraseña. Dado que el tipo de entrada está marcado como contraseña, cuando el usuario ingrese cualquier texto en el campo, quedará enmascarado.
- Debido a que el tipo de entrada se especifica como correo electrónico, el texto en el cuadro debe coincidir con el patrón nombre@sitio.dominio.
- Cuando el tipo de entrada está marcado como un número, si un usuario intenta ingresar cualquier carácter usando el teclado o el alfabeto, no se ingresará en el cuadro de texto.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador para la validación del formulario AngularJS al enviar.
Salida
Para ver la validación del formulario en acción, haga clic en el botón Enviar sin ingresar ninguna información en la pantalla.
Después de hacer clic en el botón Enviar, aparecerá una ventana emergente que mostrará un error de validación que indica que el campo debe completarse.
Entonces, la validación del control que se marcó como requerido hace que se muestre el mensaje de error si el usuario no ingresa ningún valor en el campo de texto.
Cuando el usuario ingresa cualquier valor en el control de contraseña, notará el símbolo '*' utilizado para enmascarar los caracteres que se ingresan.
A continuación, introduzcamos una dirección de correo electrónico incorrecta y hagamos clic en el botón Enviar. Después de hacer clic en el botón Enviar, aparecerá una ventana emergente que muestra un error de validación que indica que el campo debe tener el símbolo @.
Por lo tanto, la validación del control que se marcó como control de correo electrónico hará que se muestre el mensaje de error si el usuario no ingresa una identificación de correo electrónico adecuada en el campo de texto.
Finalmente, cuando intente ingresar caracteres en el control de texto de edad, no se ingresará en la pantalla. El control solo se completará con un valor cuando se ingrese un número en el control.
Validación de formulario usando $dirty, $valid, $invalid, $pristine
AngularJS Proporciona sus propiedades adicionales para la validación. AngularJS proporciona las siguientes propiedades para los controles con fines de validación
- $sucio – El usuario ha interactuado con el control.
- $válido – El contenido del campo es válido.
- $inválido – El contenido del campo no es válido.
- $prístino – El usuario aún no ha interactuado con el control.
A continuación se detallan los pasos que se deben seguir para realizar la validación angular.
Paso 1) Utilice la propiedad no validar al declarar el formulario. Esta propiedad le dice a HTML5 que AngularJS realizará la validación.
Paso 2) Asegúrese de que el formulario tenga un nombre definido. El motivo de hacer esto es que, al realizar la validación Angular, se utilizará el nombre del formulario.
Paso 3) Asegúrese de que cada control también tenga un nombre definido. El motivo de hacer esto es que, al realizar la validación Angular, se utilizará el nombre del control.
Paso 4) Ingrese al ng-mostrar directiva para verificar las propiedades $dirty, $invalid y $valid para los controles.
Veamos un ejemplo que incorpora los pasos mencionados anteriormente.
En nuestro ejemplo,
Simplemente tendremos un campo de texto simple en el que el usuario debe ingresar un nombre de tema en el cuadro de texto. Si no lo hace, se generará un error de validación y se mostrará el mensaje de error al usuario.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
<p>Topic Name:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Explicación del código
- Tenga en cuenta que le hemos dado un nombre al formulario que es "myForm". Esto es necesario al acceder a los controles del formulario para la validación de AngularJS.
- Usando la propiedad “novalidate” para garantizar que el formulario HTML permita que AngularJS realice la validación.
- Estamos usando la directiva ng-show para verificar las propiedades “$dirty” y “$invalid”. Esto significa que si se modificó el cuadro de texto, el valor de la propiedad “$dirty” será verdadero. Además, en el caso en que el valor del cuadro de texto sea nulo, la propiedad “$invalid” se convertirá en verdadera. Entonces, si ambas propiedades son verdaderas, la validación fallará para el control. Por lo tanto, si ambos valores son verdaderos, ng-show también se convertirá en verdadero y se mostrará el control span con los caracteres de color rojo.
- En este caso, verificamos la propiedad “$error”, que también se evalúa como verdadera porque mencionamos que se debe ingresar un valor para el control. En tal caso, cuando no se ingresan datos en el cuadro de texto, el control de extensión mostrará el texto “Se requiere el nombre de usuario”.
- Si el valor del control del cuadro de texto no es válido, también queremos deshabilitar el botón de envío para que el usuario no pueda enviar el formulario. Estamos usando la propiedad “ng-disabled” para que el control haga esto en función del valor condicional de la propiedad “$dirty” y “$invalid” del control.
- En el controlador, simplemente configuramos el valor inicial del valor del cuadro de texto en el texto "AngularJS". Esto se hace simplemente para configurar un valor predeterminado para el cuadro de texto cuando se muestra el formulario por primera vez. Muestra mejor cómo se realiza la validación para el campo del cuadro de texto.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.
Salida
Cuando se muestra el formulario por primera vez, el cuadro de texto muestra el valor de “AngularJS” y se habilita el botón “Enviar”. En cuanto se elimina el texto del control, se habilita el mensaje de error de validación y se deshabilita el botón Enviar.
La captura de pantalla anterior muestra dos cosas.
- El botón Enviar está deshabilitado
- No hay ningún nombre de tema en el cuadro de texto Tema. Por lo tanto, aparece el mensaje de error “Se requiere nombre de usuario”.
Validación de formulario usando AngularJS Auto Validate
AngularJS tiene una función para validar todos los controles en un formulario automáticamente sin necesidad de escribir un código personalizado para la validación. Esto se puede hacer incluyendo un módulo personalizado llamado "jcs-AutoValidate".
Con este módulo implementado, no es necesario colocar ningún código especial para realizar la validación o mostrar los mensajes de error. Todo esto lo maneja el código dentro de JCS-AutoValidate.
Veamos un ejemplo sencillo de cómo lograrlo.
En este ejemplo,
Simplemente vamos a tener un formulario simple con un control de cuadro de texto que es un campo obligatorio. Se debe mostrar un mensaje de error si este control no se completa.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
Explicación del código
- Primero, debemos incluir el script "jcs-auto-validate.js" que tiene toda la funcionalidad de validación automática.
- Necesitamos asegurarnos de que cada elemento, incluida la "etiqueta div", se coloque en una clase de "grupo de formulario".
- También es necesario asegurarse de que cada elemento (que es un elemento HTML como control de entrada, control de extensión, control div, etc.), como los controles de entrada, también se coloquen en la clase de grupo de formulario.
- Incluya jcs-autovalidate en su módulo AngularJS JS.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.
Salida
De forma predeterminada, cuando ejecute su código, el formulario anterior se mostrará según el código HTML.
Si intenta enviar el formulario, aparecerá un mensaje de error que dice: "Este campo es obligatorio". Todo esto se hace mediante la opción JCS-AutoValidate.
Comentarios de usuarios con botones Ladda
Los botones "ladda" son un marco especial creado para botones encima de JavaGuión para dar un efecto visual a los botones cuando se presionan.
Entonces, si a un botón se le asigna el atributo "ladda" y se presiona, se mostrará un efecto de giro. Además, hay diferentes estilos de datos disponibles para que el botón proporcione efectos visuales adicionales.
Veamos un ejemplo de cómo ver los botones "ladda" en acción. Solo veremos un formulario simple que tiene un botón de enviar. Cuando se presiona el botón, se mostrará un efecto de giro en el botón.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Explicación del código
- Estamos usando el "ng-enviar”directiva para llamar a una función llamada “enviar”. Esta función se utilizará para cambiar el atributo ladda del botón de enviar.
- El atributo ladda es un atributo especial del marco ladda. Es este atributo el que añade el efecto de giro al control. Estamos configurando el valor del atributo ladda para la variable de envío.
- La propiedad de estilo de datos es nuevamente un atributo adicional ofrecido por el marco ladda, que simplemente agrega un efecto visual diferente al botón de enviar.
- Es necesario agregar el módulo 'AngularJS-ladda' a la aplicación AngularJS.JS para que el marco ladda funcione.
- Inicialmente, estamos definiendo y estableciendo el valor de una variable llamada "enviar" en falso. Este valor se establece para el atributo ladda del botón de envío. Al establecer esto inicialmente en falso, estamos diciendo que no queremos que el botón de enviar tenga el efecto ladda por el momento.
- Estamos declarando una función que se llama cuando se presiona el botón enviar. En esta función, configuramos el "envío" en verdadero. Esto hará que se aplique el efecto ladda al botón de enviar.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.
Salida
Cuando se muestra el formulario inicialmente, el botón de envío se muestra en su forma simple.
Cuando se presiona el botón enviar, la variable de envío en el controlador se establece en verdadero. Este valor se pasa al atributo "ladda" del botón de envío, lo que provoca el efecto de giro del botón.
Resumen
- La validación de los controles HTML del cuadro de texto se puede realizar utilizando el atributo 'required'.
- En HTML5, se agregaron nuevos controles, como contraseña, correo electrónico y número, que proporcionan su propio conjunto de validaciones.
- La validación de formularios en AngularJS se realiza observando los valores $dirty, $valid, $invalid y $pristine de un control de formulario.
- La validación automática en aplicaciones AngularJS también se puede lograr utilizando el módulo de validación automática JCS.
- Los botones Ladda se pueden agregar a una aplicación Angular.js para brindarle al usuario una sensación visual mejorada cuando se presiona el botón.