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:

  • Recuerda poner el atributo “server” 聽a la propiedad “runat” de los controles <input>聽de HTML, de lo contrario, y como es l贸gico, no podr谩s disponer de sus propiedades en tiempo de ejecuci贸n
  • Los controles <input>聽de HTML no disponen de la propiedad “Text” como sus hermanos mayores <TextBox>, en su caso, la propiedad que recoge el valor introducido es “Value
  • Resulta extremadamente pr谩ctico para la validaci贸n, hacer uso de CSS para remarcar聽las entradas correctas (verde) o incorrectas (rojo) de texto en los controles <input> y que veremos m谩s adelante

 

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:

  • Documento nacional de identidad (8 d铆gitos y 1 letra, sin espacios: ejem. 01234567H):聽“[0-9A-Z][0-9]{7}[A-Z]
  • Fecha (formato dd/mm/aaaa):聽“(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d
  • Tel茅fono. (9 d铆gitos comenzando por 9, 8, 7 o 6): “^[9|8|7|6]\d{8}$
  • Correo electr贸nico:聽“^[\w._%-]+@[\w.-]+\.[a-zA-Z]{2,4}$
  • C贸digo Postal: “^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$
  • Tarjeta de cr茅dito: “^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\聽d{2}-?\s?\d{6}-?\s?\d{5}$

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!