Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Validation
Webdesign

HTML5 Validación de Formulario con el atributo “pattern”.

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Strange and Unusual HTML.
Native Popups and Modals With the HTML5 “dialog” Element
Quick Tip: Don’t Forget the “noscript” Element

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

En este curso exploraremos el atributo pattern de HTML, usandolo para ayudarnos a personalizar la forma en como validamos nuestros formularios.

Validación

La validación de formulario es de vital importancia para la seguridad de un sitio web así como también para su funcionalidad. El proceso de validación evalúa si el valor de entrada está en el formato correcto antes de enviarse. Por ejemplo, si tenemos una casilla  de entrada para una dirección de correo electrónico, entonces el valor en esa casilla debe contener, sin duda, una dirección de correo validad; ésta debería empezar con una letra o un número, seguido por el símbolo @ y finalmente, terminar con un nombre de dominio.

La especificación que HTML5 ha hecho a la validación que es un poco más fácil con la introducción de nuevos tipos de entrada tales como; email, url y tel, y, además, estas vienen empacadas con validación predefinidas. Cuando el valor dado no cumple con el formato esperado, estos tipos de entrada arrojaran un mensaje de error, de está forma evitan el envío.

Invalid email address error message
Mensaje de Error de una dirección de correo invalida (Chrome).

Sin embargo, esperar cada posible escenario de entrada para ser atendido es poco factible. ¿Qué pasa si usted tiene un nombre de usuario, un código zip, o algún tipo de datos en especial que no son especificados como los demás tipos de valores estándar? ¿Cómo vamos a validar esas entradas? Bueno, aquí es donde el atributo pattern entra en juego.

Usando el Atributo Pattern

El atributo pattern, solamente se puede utilizar en el elemento input. Nos permite definir nuestras propias reglas para validar el valor de entrada usando Regular Expressions (RegEx). Otra vez, si el valor no coincide con el patrón especificado, entonces arrojará un error.

Por ejemplo, digamos que tenemos una entrada para el nombre de usuario en nuestro formulario. No hay un tipo de valor estándar para nombre de usuario, por lo tanto usamos el tipo de entrada regular text.

Vamos a definir una reglar usando el atributo pattern. En este caso, especificaremos que el nombre de usuario debería consistir solamente de letras minúsculas, nada de letras mayúsculas, ni números u otro tipo de caracteres especiales están permitidos. Además, la longitud del nombre de usuario no debería ser mayor de 15 caracteres. En RegEx, está regla puede ser expresada como [a-z] {1,15}.

Añadir [a-z] {1,15} como el valor del atributo pattern en nuestra casilla de entrada para nombre de usuario:

Ahora, ya que solamente acepta letras minúsculas, tratar de enviar cualquier otro valor, solamente arrojará un mensaje de error.

The error message stating the pattern is not matched
El mensaje de error, indicando que no coincide con el valor del pattern.

Así como usted puede ver arriba, el mensaje de error dice “Por favor, iguale el formato solicitado”. Por lo tanto, nuestra validación está trabajando, pero éste mensaje no ayuda a nuestros usuarios a entender cual es el formato que se requiere. El diseño de interface falla.

Personalización de mensaje de validación.

Por fortuna, podemos personalizar el mensaje para que sea más útil, y tenemos algunas formas de hacer eso. El método más fácil es especificar un atributo title dentro de nuestro elemento de entrada:

Ahora que el título está incluido junto con el mensaje por defecto:

Aún, el mensaje emergente es inconsistente. Si lo comparamos con el mensaje lanzado por el tipo de entrada de correo que presentamos anteriormente, las instrucciones actuales podrían ser muy más prominente.

El segundo método resolvería esto por nosotros.

Reemplazando el Mensaje por Defecto para la Validación

Ahora, vamos a reemplazar el mensaje por defecto; “Por favor igual con el formato solicitado”  con un mensaje completamente personalizado. Usaremos un poco de JavaScript para hacer esto.

Comience añadiendo un elemento id al elemento input, mientras sea capaz de seleccionarlo.

Ahora, podemos seleccionar el elemento input usando JavaScript y, así, asignarlo a una variable (ya sea entre las etiquetas <script> de nuestra página, en un archivo JavaScript separado o en el panel JS en CodePen):

Por último, especificamos el mensaje utilizado cuando el input muestra su condición invalidad.

El evento oninvalid hereda un objeto event, el cual contiene unas propiedades, incluyendo la propiedad target (el elemento invalido) y el validationMessage que contiene un mensaje de texto de error. En el ejemplo de arriba, hemos neutralizado el mensaje de texto usando el método setCustomValidity().

Ahora debería de encontrar el mensaje personalizado sin problemas y reemplazar el mensaje por defecto.

Estilizado

Para complementar los nuevos tipos de input y estos métodos para configurar un mensaje de validación personalizada, el CSS3 trae un par de útiles pseud-classes, :valid y :invalid. Estas nos permiten aplicar estilos dependiendo de la condición de validez del input, por ejemplo:

Hay varias cosas que deben tenerse en cuenta cuando esté usando pseudo-classes:

  • Primero, el método :valid es aplicado por defecto, incluso cuando el valor del input está vacío. Así, como usted puede ver arriba, ajustamos el border-color a #ccc; que es color por defecto dado a nuestro elemento input. El valor vacío siempre está considerado como valido, a menos que hayamos añadido el atributo required. En ese caso, el input es invalido y el borde de color rojo es proporcionado.
  • Los estilos validos e inválidos, aplican inmediatamente mientras el usuario está tecleando, incluso cuando el valor está vacío. Un cambio de estilo al instante puede poner en pánico a los usuarios.

Una palabra en estilizado de una mensaje emergente.

La validación de formulario se ha convertido en un nuevo estándar para las especificaciones HTML5, aún cuando el mensaje de error que aparece, depende completamente del navegador. Espere diferentes estéticas en diferentes navegadores, lo cual no ayuda a la consistencia para su diseño de interface.

Google Chrome evito la habilidad de personalizar el estilo del mensaje emergente hace algunos años. Si esto es algo que usted quiere lograr, la única opción que queda es anular por completo el mensaje emergente usando JavaScript, así que ¡veamos como funciona!

Hagamos algo más avanzado

Vamos a crear una ventana personalizada, la cual aparecerá cuando nuestro valor de entrada sea invalido. Para comenzar con esto, necesitamos seleccionar un par de elementos, a saber; el elemento input y el elemento form:

Luego, crearemos un nuevo elemento, el cual contendrá nuestro mensaje.

Acá hemos creado un nuevo elemento div. Le dimos un id de notify y lo escondemos configurando la propiedad display a none. Por último, agregamos el nuevo elemento div dentro del form.

Trabajando con Eventos

Hay dos eventos con los que necesitamos tratar. Primero, el evento invalid, el cual hace la llamada cuando el valor del input no coincide con el patrón. Ejecutamos lo siguiente dentro del evento invalid:

En adelante, con event.preventDefault();, evitamos el funcionamiento por defecto para que el mensaje emergente por defecto no aparezca. En lugar de eso, vamos a mostrar nuestro mensaje a través del nuevo elemento div. Añadimos el mensaje de texto dentro del contenido, añadimos una nueva clase, error y mostramos el mensaje ajustando la opción display a block.

También, añadimos una clase, invalid, para el elemento input, dándole un color rojo al borde. Asimismo, necesitamos configurar el estilo de la regla en las hojas de estilo CSS.

Adicionalmente, usted puede añadir las clases animated shake de Animate.css. Estas proporcionan cierto atractivo usando la animación shake.

El segundo evento es el evento input. Este evento se instancia cuando el valor input esta cambiado. Usaremos éste evento para revertir el input a su condición normal, así como también; ocultar el mensaje emergente, tal y como se ve a continuación.

Como usted puede ver arriba, vamos a quitar los nombres de las clases del elemento input y a ocultar el mensaje de error.

Ahora tenemos un mensaje emergente de validación completamente personalizado. Deberíamos probarlo: introduzca cualquier valor invalido.

Nota: no olvide verificar GraphicRiver si está buscando algo de inspiración para el diseño de una interfaz para un formulario.

Ideas finales

Usando los tipos estándar de input junto con el atributo pattern le dará a sus formularios una capa extra de validación, pero esté consciente que usted debería realizar algún tipo de validación del lado del servidor.

Sorprendentemente, incluso, cuando el usuario tiene desactivado JavaScript en el navegador, los últimos navegadores todavía muestran una validación emergente y evitan enviar el formulario. Safari, sin embargo, no tiene soporte para el atributo pattern, por lo menos no lo tenía al momento de escribir éste artículo. La funcionalidad similar se puede lograr usando un relleno Webshim Lib.

Espero que haya disfrutado el curso y que lo conserve como una referencia práctica para la validación en HTML5.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.