Como usar validationMessage

Cuando validamos formularios nos toca hacer mucha lógica para crear los mensajes dependiendo del tipo de validación que estamos haciendo, pero el browser tiene integrado un sistema nativo que funciona bien para eso.

HTMLObjectElement.validationMessage

La propiedad validationMessage ****te permite obtener el mensaje de validación de un elemento del formulario y es nativo del browser por lo cual viene con traducciones por defecto.

Para obtener esta propiedad buscamos el elemento usando querySelector y desde ese objeto buscamos la propiedad validationMessage.

Ejemplo

Tenemos el siguiente formulario:

Es este HTML es importante resaltar el atributo type de cada <input>, ya que basado en este type es como el browser hará la validación correspondiente:

Ahora el código JavaScript:

Vamos línea por línea:

1. Obtenemos el elemento con la etiqueta form y el elemento con el id #message
2. Al elemento form le escuchamos el evento input, este se va a disparar cuando el usuario escriba en cualquiera de los <input> hijos.
3. Cuando el evento se dispare llamamos a la función addMessage
4. La función addMessage recibe el evento en el parámetro e
5. Dentro del evento buscamos el target y dentro el validationMessage
6. Si el validationMessage tiene un string lo agregamos al DOM con el innerText del elemento #message

En este caso cuando ingresas cualquier valor a alguno de los <input> se va a disparar el evento input y en el callback vamos a escribir en el DOM el validationMessage si existe alguno.

Demo

Gracias por leer esta entrada del blog. Cualquier comentario o pregunta llegame a mi Twitter.

Tweet Me