La validación de formularios del lado del cliente ha sido un problema que siempre se ha solucionado con la utilización de Javascript, ya sea con código propio o de terceros. Esto es debido a que en el pasado era impensable tener una solución con HTML puro, pero con la llegada del conjunto de especificaciones y tecnologías que componen el actual HTML5, ahora esto es posible.
Debemos tener en cuenta la clara desventaja de que todavía no es soportado por la mayoría de los navegadores y quienes lo soportan, ya que cada uno tienen su forma particular de ejecutarse, sin embargo es importante tenerlo presente, ya que en un futuro será de una utilidad invaluable.
Nota: Para los ejemplos expuestos en este articulo, se ha utilizado Google Chrome versión 18 por ser el navegador que mas funcionalidad de HTML5 ha implementado a la fecha.
El atributo «required»
Al incluir el atributo required dentro de un elemento <input>, automáticamente se hace obligatorio su llenado y al ser un atributo tipo booleano, solo se requiere su presencia sin más.
<input type="text" name="nombre" required/>
En el momento en que se encuentra un error de validación se ejecuta la acción por defecto del navegador, normalmente aparece un pequeño globo emergente (tooltip) conteniendo un texto de advertencia. Añadiendo el atributo title en la etiqueta <input>, se puede extender la información mostrada.
<input title="Se necesita un nombre" type="text" name="nombre" required/>
El atributo «pattern» y los tipos de <input>
Con se menciono anteriormente, con required solo se necesita de cualquier valor en el elemento <input> para ser válido, pero utilizando el atributo pattern en conjunto, se logra que se verifique no solo la presencia de un valor, sino que este valor debe contener un formato, una longitud o un tipo de dato especifico. Esto último se logra definiendo un patrón con expresiones regulares.
<input type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" name="email" required/>
Con el patrón anterior se valida un formato correcto de correo electrónico (mail@example.com), pero en la práctica esto resulta un tanto absurdo, ya que definiendo un tipo email en la etiqueta <input>, el navegador por si mismo hace la validación del tipo en cuestión.
<input type="email" name="email" required/>
Es lo mismo con el resto de los tipos de <input>: search, url, tel, email, password, date pickers, number, checkbox, radio y file. Por lo tanto el potencial del atributo pattern recae en ser más específicos en el tipo de formato y longitud que se requiere. Por ejemplo, supongamos que se necesita que el usuario ingrese una dirección valida de IPV4, lo hacemos de la siguiente manera:
<input title="0.0.0.0" type="text" name="ipv4"/>
Cuatro bloques de uno a tres dígitos es la notación punto-decimal de una dirección valida de IPV4.
La pseudo clase: invalid de CSS3
Básicamente la pseudo clase: invalid representa cualquier campo invalido que sea resultado de una validación (valga la redundancia), lo opuesto ocurre con su contraparte: valid. Esto facilita que si un campo contiene un valor inválido pueda adoptar una apariencia acorde, de esta forma ayudando al usuario a identificar los campos que necesitan ser verificados.
input:invalid {
border: 1px solid red;
}
/* Estilo por defecto */
input:valid {
border: 1px solid green;
}
Un aspecto que es importante resaltar, es que por defecto todos los campos son validos – como es de esperarse –, pero si un campo es requerido, entonces ocurre lo contrario, este por defecto será inválido.
/* Estilo por defecto */
input:required:invalid {
border: 1px solid red;
}
input:required:valid {
border: 1px solid green;
}
Conclusión
Esta es una más de las grandes bondades que trae consigo HTML5, sin embargo la validación de formularios de manera nativa aun se encuentra en una etapa temprana de desarrollo, especialmente con lo que respecta a la manera de notificar la existencia de un campo invalido, ya que no existen etiquetas CSS para personalizar el estilo del tooltip, al menos en caso de Google Chrome.
Referencias
Artículo escrito por:
Uy en el Firefox 11.0 no me jala la instruccion title del Required>
pero si en el Chrome.
nota importante….
Una pregunta, hay algún script que, si el navegador no tiene implementada estas características, se las aplique sin necesidad de añadir nada más al html?
Es decir, por ejemplo cuando usamos una etiqueta article y el navegador no lo contempla, existen un script que tan solo incluyéndolo ya simula su comportamiento, habría algo similar para esto?
Y una observación aunque la validación de formularios en el cliente es muy útil y mucho más rápido, nunca olvidaría hacer las mismas validaciones pero en el servidor.
Estoy de acuerdo con Sergio Raposo, pues dejarle la responsabilidad a la validación de lado del cliente resulta algo peligroso, pues cualquiera puede modificar el archivo .html y usar el mismo Submit, de esta forma podemos evitar la validación de los datos que se envían, por eso es necesario revalidar del lado del servidor.
para que funcionen en todos los navegadores estadar… la propiedad debe llamarse required="required" y el atributo "title" debiera ser "placeholder"
comos ehac epa un mensaje de aletrta que cuando haga una c onsulta ose que un usuario quiera hacer un
Si nos puedes explicar más especificamente que quieres hacer, con gusto te respondemos.
Buenas tardes, quisiera por favor me explicara exactamente como hago para insertar un nuevo símbolo, me explico, se que si quiero lo números debo poner [0-9], alfanuméricos [a-zA-Z0-9], ok, pero si quisiera que puedan aparecer el símbolo "#" y el punto (.) como haría. Quisiera saber como se haría y que me lo explicaras, por favor.
Te agradezco mucho, creo que a muchos nos servirá esta información demasiado difícil de conseguir.
Hola Byron, puedes utilizar el atributo pattern, permite hacer validación de un campo de texto en base a una expresión regular ( pattern="<tu expresión regular>" ) en tu campo input. Pero no olvides que esto es fácil de burlar, así que también valida en tu backend.
Un cordial saludo muy buena la explicación y muy útil el contenido para validar los formularios de forma sencilla con html5.
Muy bueno este articulo, solo una duda ¿Cómo implemento sobre HTML5 la comprobación de que no existe en la Base de Datos? gracias
Para eso, necesitas realizar la validación en tu backend y despues enviar al frontend (mediante json) algún mensaje de error con ajax.
Muy bueno muchas gracias.. pero como dice el dicho .. casa de herrero …en el formulario de comentar.. 😉