Menu

Validación de un formulario ASP.NET con HTML5

15 julio, 2016 - Diseño & ASP.NET, Tecnología

Utilizar los controles HTML5 para la validación de un formulario ASP.NET desde el lado del cliente

Como bien sabes, ASP.NET tiene sus controles de servidor destinados a la validación de formularios, tanto del lado del cliente como del servidor, pero en esta ocasión, nos vamos a valer de la potencia de HTML5 y su capacidad para llevar a cabo tareas de validación, para comprobar, desde el cliente, los datos introducidos en un formulario, antes de ejecutarse la funcionalidad deseada. En resumen: La Validación de un formulario ASP.NET con HTML5.

En este ejemplo, vamos a realizar un formulario de contacto con campos típicos (Nombre completo, DNI, fecha de nacimiento, domicilio, etc).

Nuestra aplicación tomará los valores de los <input>, los mandará por email y se registrarán en una tabla de una B.D. SQLServer.

En casos como este, vemos que un formulario con muchos campos puede resultar demasiado “pesado” si se utililzan controles de servidor de entrada de datos <TextBox>, de validaciones, etc., para unos requerimientos tan pequeños. Y es ahí, donde HTML5 puede sacar toda su potencia escondida para materializar esta sencilla pero necesaria función de validar del lado del cliente, toda vez que, en esta ocasión, no vamos a utilizar la validación del lado del servidor.

¡Ojo! Este es un simple ejemplo de validación del lado del cliente, pero esto no quiere decir que no demos la importancia necesaria a la validación del lado del servidor.

Validación de un formulario ASP.NET aprovechando la funcionalidad de HTML5

Validación de un formulario ASP.NET con HTML5

Ya que hemos decidido que vamos a utilizar para nuestro formulario ASP.NET controles nativos de HTML5, para aprovechar la funcionalidad intrínseca de validación, debemos tener en cuenta un par de salvedades:

 

Vamos con la parte de diseño

 

Llegados a este punto, es importante reseñar tres propiedades fundamentales para la validación “required“, “type” y “pattern“. La primera se utiliza  para decirle al navegador que es obligatorio que el campo <input> contenga algún valor. Esta propiedad no necesita atributos.

La propiedad type, no sólo sirve para indicar que el <input> es de tipo text, submit o password. HTML5 dispone de una gran variedad de valores para esta propiedad: email, date, month, number, url… etc. Por lo tanto, si un <input> es de tipo “email”, el navegador validará su contenido y mostrará un mensaje en caso de que dicho contenido no se adapte al formato correcto de un correo electrónico.

Si queremos mostrar un mensaje concreto de error, necesitamos la propiedad title:

<input runat=”server” type=”text” id=”txtEmail” name=”txtEmail” class=”form-control ” placeholder=”¿Cual es tu eMail?” pattern=”^[\w._%-]+@[\w.-]+\.[a-zA-Z]{2,4}$” required title=”El email introducido no tiene un formato correcto”>

La última propiedad: pattern, sirve para establecer el patrón que exigimos a HTML5 sobre como validar el elemento <input> en cuestión. Obviamente el patrón se basa en regex (expresiones regulares), pero para facilitarte la tarea, te vamos a dejar alguno de los patrones más comunes:

Ya te habrás fijado que para validar el contenido del campo txtEmal, no era necesario utilizar un expresión regular, puesto que estableciendo la propiedad type=”email” estaría implícita la valildación de un formato de correo electrónico. No obstante, nosotros seguimos prefiriendo la expresión regular, ya que en algunas ocasiones, la validación con type no ha sido demasiado concienzuda, dando como válido, por ejemplo, una dirección sin dominio ¿?

Si te preguntas porqué utilizamos el término propiedad en vez de atributo, como correspondería a la nomenclatura de un elemento o etiqueta HTML, es porque no debemos olvidar que estos elementos “no dejan de ser controles de .NET” por muy simples que sean.

Otra parte muy importante a la hora de jugar con las validaciones, es mostrar al usuario de forma rápida y visual, cuando un campo obligatorio contiene un valor válido y cuando no. Para ello vamos a utilizar las pseudo clases de CSS required, valid e invalid, para que cuando el contenido sea incorrecto, el <input> aparezca recuadrado en color ROJO, y VERDE cuando esté OK.

Validación de un formulario ASP.NET aprovechando la funcionalidad de HTML5

CSS

¿Y que haríamos con el contenido del formulario?, pues lo que quieras o necesites.

En este ejemplo, que es un formulario de contacto de una Web, generamos un email con los datos recibidos del formulario, los grabamos en la tabla “solicitantes” de una BD, y reseteamos a blancos los contenidos de los campos para evitar el viewstate, aunque también podríamos haber inhabilitado la propiedad en tiempo de diseño: enableviewstate=”False”. Por último, ponemos el foco en el control txtNombre y lanzamos un mensaje al usuario informando del correcto envío del formulario.

Ten en cuenta que para hacer uso de la clase MailMessage tienes que configurar los parámetros correspondientes <MailSettings></MailSettings> en el fichero Web.config (se muestra más adelante)

Code behind

Función contructorDelFormulario()

 

…Una parte de Web.config

 

Por último, nos valemos de la propiedad onSubmit del objeto form para lanzar un mensaje al usuario de que sus datos han llegado correctamente…

Si te interesa ver como implementamos las cajas de diálogo alerta() y confirmacion() que utilizamos en este ejemplo, y que son similares a alert y confirm de javaScript, aunque muy mejoradas, puedes ver nuestro post titulado “alert y confirm mejorados utilizando jQueryUI.Dialog y ASP.NET“. Y si quieres probar el código de este ejemplo, puedes verlo aquí.

Esperamos que este artículo te haya sido de ayuda. ¡Hasta otra!

 

2 pensamientos sobre “Validación de un formulario ASP.NET con HTML5

carlos

Excelente, aunquee me gusttaria ver como hacer validacion en el lado del servidor, como por ejemplo al vaildad un codigo de cliente

Respuesta
    UsrBlogSiiNet

    Hola Carlos. Gracias por tu comentario. En breve haremos un post dedicado a las validaciones del lado del servidor. Te avisaremos cuando esté publicado.

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *