Cómo Hacer Etiquetas de Entrada Flotantes Con Validación HTML 5

TL;DR Remplaza tu validación de JavaScript con validación HtML5 Es mas facil de lo que crees y te da una tonelada de markupcontrol de estilos. Prueba este demo:

Lo Que Estamos Haciendo Aqui,

Entonces,necesitas validar un form. Haces lo correcto y empiezas con una validación del lado del servidor. Luego,  si eres un buen diseñador web, añades un poco de validación para que  tus usuarios te den feedback ,sea que rellenen el form correctamente o no. Si eres un muy buen diseñador web talvez puedas hacer que te respondan instantaneamente, para que el usuario se de cuenta que escribio un email valido tan pronto que se valide esta.

Vas por tu libreria favorita de JQuery. Tal vez incluso eres lo suficientemente cool para usar una librería vanilla JavaScript.

Agregas un poco de marcado extra. Re-estilizas algunas cosas... agregas algunas reglas de validación JavaScript. Conectas el JavaScript al servidor por medio de AJAX. Te das de topes contra el teclado unas cuantas veces porque no has hecho esto en un par de meses y tienes que buscar exactamente cómo esa nueva validación JavaScript hace las cosas... Y así por el estilo.

Tienes la idea. No es divertido.

¿Y si pudieras saltarte todas esas cosas de JavaScript y solo validar con atributos de validación HMTL5 y CSS?

¿Qué es Validación de Formulario HTML5?

En términos toscos: agregas atributos como required o type="email" para campos <input> y tu navegador hace el resto.

Continúa e intenta enviar el formulario en este demo CodePen sin contenido. Después intenta enviarlo sin una dirección válida de email:

Patrones Regex

Podrías haber notado que puedes ingresar un email como a@a. Claramente quieres una dirección real de email, así que especificando un patrón preciso que nuestros datos deban empatar, podemos validar lo que se ingresa. Asegurémonos de que empata el patrón de tener un punto o dos o tres caracteres al final. Podemos hacer esto usando el atributo pattern y regex.

Si estás no estás seguro sobre aprender regex necesitas superarlo. Regex es locamente poderoso y en cada tipo de lenguaje de programación siempre lo harás.

Soy terrible con regex complicado así que busqué en Google "regex email" (ya que estoy seguro que esto ya ha sido resuelto) y terminé encontrando uno en regular-expressions.info. Aquí está nuestro regex en regex101.com (un recurso muy útil para probar tus expresiones regulares).

1

^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$

Si lees un poco sobre el patrón te darás cuenta de que el autor excluyó coincidencias en minúsculas porque esperan que uses una bandera sensible a las mayúsculas. Los patrones de ingreso HTML5 no aceptan banderas así que para obtener letras minúsculas necesitamos agregar el rango de mayúsculas y minúsculas (ej. A-Za-z). Puedes leer exactamente lo que cada parte del patrón está haciendo en el panel derecho.

Para hacer que nuestros errores de validación arrojen algo más que "¡Formato equivocado!" podemos especificar el atributo title con un error de validación, como este:

1

<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$" title="Please enter a valid email.">

Ahora prueba la entrada de email en este demo:

No te preocupes, no tendrás que escribir patrones alocados para cada campo que tengas. La mayoría del tiempo solo querrás requerir algo y asegurarte de que es un cierto tipo de dato. Por ejemplo, un número mayor a 5 podría lucir como <input type="number" min="5" required>.

Ten en mente que no todos los navegadores soportan todos los atributos de validación. Por ejemplo, FireFox no soporta minlength. pattern tiene un muy buen soporte sin embargo, así que siempre puedes replicar funcionalidad. minlength puede ser replicado con pattern=".{3,}" en donde 3 es tan largo como necesite ser.

Si no puedes encontrar un patrón al que tenías acceso en tu vieja librería JavaScript, puedes probablemente encontrarlo navegando su código fuente, ya que al final la librería JavaScript está empatando exactamente los mismos patrones regex que nosotros.

Retroalimentación Instantánea

¿No sería agradable si nuestro campo mostrara algún tipo de indicación cuando fuera válido? Felizmente, hay un selector CSS :valid para eso. También hay un selector :invalid. Ingresa tu nombre en este demo:

Notarás la advertencia obvia de que los estilos inválidos se muestran incluso antes de que hayas tocado el campo.

Podrías pensar en hacer algo como :invalid:not(:empty) pero no funcionaría porque los navegadores son tontos y siempre consideran elementos de formulario vacíos.

Podríamos hacer algunos trucos con el nuevo pseudo-selector :placeholder-shown como se muestra en el siguiente demo, pero el soporte de navegador para :placeholder-shown es horrible y no hay un polyfill moderno para este aún. Bummer.

Por ahora, nuestra mejor apuesta es agregar un poco de JavaScript para intercalar una clase dependiendo de si el campo está vacío o no. Aquí está el demo en funcionamiento:

Haciéndolo Hermoso

Mi parte favorita sobre esta aproximación es si tienes control CSS completo sobre cada pedazo de tu formulario.

Empujando el <span> bajo el <input> ganaremos acceso al selector hermano adyacente en nuestra clase .empty. Podemos entonces crear un placeholder falso que se desplaza a un lado hermosamente tan pronto como el campo ya no esté vacío. Aquí hay un ejemplo:

Si el <span> estando bajo el <input> ofende tu sensibilidad o no es lo suficientemente accesible, siempre puedes modificar el JavaScript para agregar la clase empty al <label> en su lugar. Entonces solo es cuestión de modificar el CSS un poco. Aquí hay un ejemplo haciéndolo de esa manera:

Las clases de validación también funcionan en el elemento <form> así que realmente puedes alocarte con el control de estilo.

No hay limite sobre lo que puedes hacer con esta aproximación. Algunas ideas:

• Agrega iconos de validación que se desvanezcan.
• Agita el campo si el usuario sale de este y es inválido.
• Atenúa los campos si son llenados correctamente.

Soporte de Navegador

• Perfecto en navegadores modernos e IE10+.
• IE9 no soporta pseudo selectores de validación así que no tendrás el estilizado pero el formulario aún funciona muy bien.

Advertencia Positiva

No hay manera de estilizar los mensajes de validación. Los navegadores deshabilitaron la habilidad de estilizar esos. No creo que sea necesariamente malo ya que la gente estará acostumbrada a estos estilos de validación. De hecho, probablemente es por eso que los navegadores decidieron cortar nuestro acceso a ellos. Ahora están estandarizados.

También están fuera del flujo de la página para que no tengas que preocuparte de ellos empujando elementos con su apariencia.

Si necesitas absolutamente control completo sobre los estilos de validación, este método podría no ser para ti.

Deja un Comentario

¡Estoy emocionado de obtener alguna retroalimentación sobre esto y me encantaría ver algunos interesantes estilos/técnicas de validación!.

Crédito en donde es necesario

La publicación de blog "Placeholders Adaptativos" de Danny King me dejaron pensando sobre esto.