La validación es el proceso que garantiza que los datos sean correctos y completos.
En un ejemplo del mundo real, supongamos un sitio que requiere que se complete un formulario de registro antes de obtener acceso completo a este sitio. La página de registro tendría campos de entrada para nombre de usuario, contraseña, identificación de correo electrónico, etc.
Cuando el usuario envía el formulario, normalmente se produce una validación antes de que los detalles se envíen al servidor. Esta validación intentaría garantizar en la mayor medida posible que los detalles de los campos de entrada se ingresen de la manera correcta.
Por ejemplo, la identificación del correo electrónico siempre debe tener el formato Esta dirección de correo electrónico está protegida contra spambots. Necesita tener JavaScript habilitado para verlo. ; si alguien ingresa solo el nombre de usuario en la identificación del correo electrónico, lo ideal sería que la validación fallara. Por lo tanto, la validación busca realizar estas comprobaciones básicas antes de que los detalles se envíen al servidor para su posterior procesamiento.
En este tutorial, aprenderá:
- Validación de formularios usando HTML5
- Validación de formularios usando $ sucio, $ válido, $ inválido, $ prístino
- Validación de formularios usando AngularJS Auto Validate
- Comentarios del usuario con botones Ladda
Validación de formularios usando HTML5
La validación del formulario es el proceso de validación previa de la información ingresada en un formulario web por el usuario antes de que se envíe al servidor. Siempre es mejor validar la información del lado del cliente. Esto se debe a que agrega menos gastos generales si el usuario debe volver a presentar el formulario si la información ingresada es incorrecta.
Echemos un vistazo a cómo se puede realizar la validación de formularios en HTML5.
En nuestro ejemplo, mostraremos un formulario de registro simple al usuario en el que el usuario debe ingresar detalles como un nombre de usuario, contraseña, identificación de correo electrónico y edad.
El formulario tendrá controles de validación para asegurar que el usuario ingrese la información de manera adecuada.
Event Registration Guru99 Global Event
Explicación del código:
- Para el tipo de entrada de texto, estamos usando 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, se enmascarará.
- Debido a que el tipo de entrada se especifica como correo electrónico, el texto del cuadro debe coincidir con el patrón. Esta dirección de correo electrónico está protegida contra spambots. Necesita tener JavaScript habilitado para verlo. .
- 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á el siguiente resultado cuando ejecute su código en el navegador.
Producción:
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 muestra un error de validación de que el campo debe completarse.
Entonces, la validación para el 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 '*' que se usa para enmascarar los caracteres ingresados.
Luego ingresemos una identificació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 de 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 cualquier carácter 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 formularios usando $ sucio, $ válido, $ inválido, $ prístino
AngularJS proporciona sus propiedades adicionales para la validación. AngularJS proporciona las siguientes propiedades para controles con fines de validación
- $ sucio: el usuario ha interactuado con el control
- $ valid: el contenido del campo es válido
- $ invalid: el contenido del campo no es válido
- $ pristine: el usuario aún no ha interactuado con el control
A continuación se muestran los pasos que deben seguirse para llevar a cabo la validación angular.
Paso 1) Utilice la propiedad no validate al declarar el formulario. Esta propiedad le dice a HTML5 que la validación la realizará AngularJS.
Paso 2) Asegúrese de que el formulario tenga un nombre definido. La razón para 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 para hacer esto es que, al realizar la validación Angular, se utilizará el nombre del control.
Paso 4) Use la directiva ng-show para verificar las propiedades $ dirty, $ invalid y $ valid para los controles.
Veamos un ejemplo, que incorpora los pasos mencionados anteriormente.
En nuestro ejemplo,
Solo tendremos un campo de texto simple en el que el usuario debe ingresar un nombre de tema en el cuadro de texto. Si esto no se hace, se activará un error de validación y se mostrará el mensaje de error al usuario.
Event Registration Guru99 Global Event
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 en el formulario para la validación de AngularJS.
- Usar la propiedad "novalidate" para asegurar que el formulario HTML permita a AngularJS realizar la validación.
- Estamos usando la directiva ng-show para verificar la propiedad "$ dirty" y "$ invalid". Esto significa que si se ha modificado el cuadro de texto, el valor de la propiedad "$ sucio" será verdadero. Además, en el caso de 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 de intervalo con los caracteres de color rojo.
- En esto, estamos verificando la propiedad "$ error" que también se evalúa como verdadera porque hemos mencionado para el control que se debe ingresar un valor para el control. En tal caso, donde no hay datos ingresados en el cuadro de texto, el control de extensión mostrará el texto "Se requiere nombre de usuario".
- Si el valor de 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 las propiedades "$ sucio" y "$ inválido" del control.
- En el controlador, solo estamos configurando el valor inicial del valor del cuadro de texto en el texto 'AngularJS'. Esto solo se está haciendo para establecer un valor predeterminado en el cuadro de texto cuando se muestra el formulario por primera vez. Muestra mejor cómo ocurre la validación para el campo de cuadro de texto.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
Cuando el formulario se muestra inicialmente, el cuadro de texto muestra el valor de "AngularJS" y el "botón enviar" está habilitado. Tan pronto como elimine 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 un nombre de tema en el cuadro de texto Tema. Por lo tanto, genera el mensaje de error "Se requiere nombre de usuario".
Validación de formularios usando AngularJS Auto Validate
Existe una función en AngularJS para haber validado 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 es manejado por el código dentro de JCS-AutoValidate.
Veamos un ejemplo simple de cómo lograr esto.
En este ejemplo,
Solo 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 no se completa este control.
Event Registration Guru99 Event
Explicación del código:
- Primero, necesitamos 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 intervalo, control de div, etc.), como los controles de entrada, también se colocan 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á el siguiente resultado cuando ejecute su código en el navegador.
Producción:
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 realiza mediante la opción JCS-AutoValidate.
Comentarios del usuario con botones Ladda
Los botones "ladda" son un marco especial creado para botones en la parte superior de JavaScript para dar un efecto visual a los botones cuando se presionan.
Entonces, si un botón recibe 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 muestra un efecto de giro en el botón.
Event Registration Guru99 Event
Explicación del código:
- Estamos usando la directiva "ng-submit" para llamar a una función llamada "enviar". Esta función se utilizará para cambiar el atributo ladda del botón de envío.
- El atributo ladda es un atributo especial del marco ladda. Es este atributo el que agrega el efecto de giro al control. Establecemos el valor del atributo ladda a la variable que se envía.
- 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 envío.
- El módulo 'AngularJS-ladda' debe agregarse a la aplicación AngularJS.JS para que funcione el marco ladda.
- Inicialmente, estamos definiendo y configurando el valor de una variable llamada 'enviar' a falso. Este valor se establece para el atributo ladda del botón de envío. Al establecer inicialmente esto en falso, estamos diciendo que no queremos que el botón de envío 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, estamos configurando el 'envío' en verdadero. Esto hará que el efecto ladda se aplique al botón de enviar.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
Cuando el formulario se muestra inicialmente, el botón enviar se muestra en su forma simple.
Cuando se presiona el botón de envío, la variable de envío en el controlador se establece en verdadero. Este valor se pasa al atributo "ladda" del botón de enviar, 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 mediante el atributo "obligatorio".
- En HTML5, se agregan 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 $ sucio, $ válido, $ inválido y $ prístino de un control de formulario.
- La validación automática en aplicaciones AngularJS también se puede lograr mediante el módulo de validación automática de JCS.
- Los botones Ladda se pueden agregar a una aplicación Angular.js para brindar una sensación visual mejorada al usuario cuando se presiona el botón.