Validación de formulario AngularJS: TextBox, clic en el botón [Ejemplo]

La validación es el proceso que garantiza que los datos son correctos y completos.

En un ejemplo del mundo real, supongamos un sitio que requiere un formulario de registro para ser completado antes de obtener acceso completo a este sitio. La página de registro tendría campos de entrada para nombre de usuario, contraseña, ID de correo electrónico, etc.

Cuando el usuario envía el formulario, normalmente se produce una validación antes de enviar los detalles al servidor. Esta validación intentaría garantizar en la mejor medida posible que los detalles de los campos de entrada se introduzcan de la manera correcta.

Por ejemplo, el ID de correo electrónico siempre debe estar en un formato de username@site.domain; si alguien introduce solo el nombre de usuario en el ID de correo electrónico, lo ideal sería que la validación fallara. Por lo tanto, la validación busca hacer estas comprobaciones básicas antes de que los detalles se envíen al servidor para su posterior procesamiento.

En este tutorial, usted aprenderá –

Validación de formularios usando HTML5

La validación de formularios es el proceso de validación previa de la información introducida 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 sobrecarga si el usuario tuvo que volver a presentar el formulario si la información introducida era incorrecta.

Echemos un vistazo a cómo la validación de formularios se puede llevar a cabo en HTML5.

En nuestro ejemplo, mostraremos un formulario de registro simple al usuario en el que el usuario necesita ingresar detalles como un nombre de usuario, contraseña, ID de correo electrónico y edad.

El formulario tendrá controles de validación para garantizar que el usuario introduzca la información de manera adecuada.

Explicación del código:

  1. Para el tipo de entrada de texto, estamos utilizando el atributo ‘requerido’. Esto significa que el cuadro de texto no puede estar vacío cuando se envía el formulario, y algún tipo de texto debe estar presente en el cuadro de texto.
  2. El siguiente tipo de entrada es contraseña. Dado que el tipo de entrada está marcado como contraseña, cuando el usuario introduce cualquier texto en el campo, se enmascarará.
  3. Dado que el tipo de entrada se especifica como correo electrónico, el texto del cuadro debe coincidir con el patrón name@site.domain.
  4. Cuando el tipo de entrada está marcado como un número, si un usuario intenta introducir cualquier carácter usando el teclado o el alfabeto, no se introducirá 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.

Salida:

Para ver la validación del formulario en acción, haga clic en el botón Enviar sin introducir 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 debe rellenarse el campo.

Por lo tanto, la validación para el control que se marcó como requerido, hace que el mensaje de error se muestre si el usuario no introduce ningún valor en el campo de texto.

Cuando el usuario introduce cualquier valor en el control de contraseña, notará el símbolo ‘*’ utilizado para enmascarar los caracteres que se ingresan.

Vamos a introducir un ID de correo electrónico incorrecto y haga 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 el campo necesita tener el símbolo @.

Por lo tanto, la validación del control que se marcó como control de correo electrónico hará que el mensaje de error se muestre si el usuario no introduce un ID de correo electrónico adecuado 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 sólo se rellenará con un valor cuando se introduzca un número en el control.

Validación de formularios usando $dirty, $valid, $invalid, $pristine

AngularJS proporciona sus propiedades adicionales para la validación. AngularJS proporciona las siguientes propiedades para controles con fines de validación

  • $dirty — 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 presentan 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 sería realizada por AngularJS.

Paso 2) Asegúrese de que el formulario tiene un nombre definido para él. 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 tiene un nombre definido para él. La razón para hacer esto es que, al realizar la validación angular, se usará el nombre del control.

Paso 4) Utilice la directiva ng-show para comprobar las propiedades $dirty, $invalid y $valid para los controles.

Veamos un ejemplo, que incorpora los pasos mencionados anteriormente.

En nuestro ejemplo,

Sólo vamos a tener un campo de texto simple en el que el usuario necesita introducir 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.

Explicación del código:

  1. Tenga en cuenta que hemos dado un nombre para el formulario que es “MyForm”. Esto es necesario al acceder a los controles en el formulario para la validación de AngularJS.
  2. Usar la propiedad “novalidate” para asegurarse de que el formulario HTML permite a AngularJS llevar a cabo la validación.
  3. Estamos usando la directiva ng-show para verificar la propiedad “$dirty” y “$invalid”. Esto significa que si el cuadro de texto ha sido modificado, entonces 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 verdadero. Entonces, si ambas propiedades son verdaderas, entonces la validación fallará para el control. Por lo tanto, si ambos valores son true, el ng-show también se convertirá en true, y se mostrará el control span con los caracteres de color rojo.
  4. En esto, estamos comprobando la propiedad “$error” que también se evalúa como verdadero porque hemos mencionado para el control que el valor debe introducirse para el control. En tal caso, cuando no haya datos ingresados en el cuadro de texto, el control span mostrará el texto “Nombre de usuario es obligatorio”.
  5. Si el valor de control del cuadro de texto no es válido, también queremos desactivar el botón de envío para que el usuario no pueda enviar el formulario. Estamos utilizando la propiedad “ng-disabled” para que el control haga esto basado en el valor condicional de la propiedad “$dirty” y “$invalid” del control.
  6. En el controlador, solo estamos estableciendo el valor inicial del valor del cuadro de texto en el texto ‘AngularJs’. Esto se está haciendo para establecer algún valor predeterminado en el cuadro de texto cuando se muestra por primera vez el formulario. Muestra mejor cómo se produce la validación para el campo de cuadro de texto.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

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 quite el texto del control, el mensaje de error de validación está habilitado y el botón Enviar está deshabilitado.

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, desencadena el mensaje de error “Nombre de usuario es obligatorio”.

Validación de formularios usando AngularJS Auto Validate

Hay una facilidad en AngularJS para haber validado todos los controles en un formulario automáticamente sin necesidad de escribir código personalizado para la validación. Esto se puede hacer incluyendo un módulo personalizado llamado “JCS-Autovalidate”.

Con este módulo en su lugar, no es necesario colocar ningún código especial para llevar a cabo 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,

Sólo vamos a tener un formulario simple con un control de cuadro de texto que es un campo requerido. Se debe mostrar un mensaje de error si no se rellena este control.

Explicación del código:

  1. Primero, necesitamos incluir el script “jcs-auto-validate.js” que tiene toda la funcionalidad de validación automática.
  2. Tenemos que asegurarnos de que cada elemento, incluyendo la “etiqueta div”, se coloca en una clase “form-group”.
  3. También es necesario asegurarse de que cada elemento (que es un elemento HTML como control de entrada, control de span, control div, etc.) como los controles de entrada también se colocan en la clase de grupo de formulario.
  4. Incluya el jcs-autovalidate en su módulo AngularJS JS.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

Por defecto cuando ejecuta su código, el formulario anterior se mostrará según el código HTML.

Si intenta enviar el formulario, aparecerá el mensaje de error que dice: “Este campo es obligatorio”. Todo esto se hace mediante la opción JCS-Autovalidate.

Comentarios de usuario con botones Ladda

Los botones “ladda” es un marco especial construido para botones en la parte superior de JavaScript para dar un efecto visual a los botones cuando se presionan.

Por lo tanto, 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. Sólo vamos a ver un formulario simple que tiene un botón de enviar. Cuando se pulsa el botón, se mostrará un efecto de giro en el botón.

Explicación del código:

  1. Estamos usando la directiva “ng-submit” para llamar a una función llamada “submit”. Esta función se utilizará para cambiar el atributo ladda del botón de envío.
  2. El atributo ladda es un atributo especial del framework ladda. Es este atributo el que agrega el efecto de giro al control. Estamos estableciendo el valor del atributo ladda a la variable que envía.
  3. La propiedad de estilo de datos es de nuevo un atributo adicional ofrecido por el framework ladda, que simplemente agrega un efecto visual diferente al botón de envío.
  4. El módulo ‘AngularJS-Ladda’ necesita ser agregado a la aplicación AngularJjs para que el framework ladda funcione.
  5. Inicialmente, estamos definiendo y estableciendo el valor de una variable llamada ‘enviar’ a false. 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 enviar tenga el efecto ladda hasta el momento.
  6. Estamos declarando una función que se llama cuando se presiona el botón de envío. En esta función, estamos configurando el ‘envío’ en true. Esto hará que el efecto ladda se aplique al botón enviar.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

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 true. Este valor se pasa al atributo “ladda” del botón de envío que provoca el efecto de giro del botón.

Resumen

  • La validación de los controles HTML del cuadro de texto se puede hacer utilizando el atributo ‘required’.
  • En HTML5, hay nuevos controles añadidos como contraseña, correo electrónico y número que proporcionan su propio conjunto de validaciones.
  • La validación de formularios en AngularJS se cuida mirando los valores $dirty, $valid, $invalid y $prístine de un control de formulario.
  • La validación automática en aplicaciones AngularJS también se puede lograr mediante el uso del módulo JCS-Auto validate.
  • Los botones Ladda se pueden agregar a una aplicación Angular.js para dar un poco de una sensación visual mejorada al usuario cuando se presiona el botón.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *