1 de enero de 2023

Cómo usar validationMessage

Al validar formularios, tenemos que realizar mucha lógica para crear los mensajes dependiendo del tipo de validación que estemos realizando, pero el navegador tiene un sistema nativo incorporado que funciona bien para eso.

HTMLObjectElement.validationMessage

La propiedad validationMessage permite obtener el mensaje de validación de un elemento de formulario y es nativa del navegador, por lo que viene con traducciones por defecto.

Para obtener esta propiedad, buscamos el elemento utilizando querySelector y a partir de ese objeto buscamos la propiedad validationMessage.

Ejemplo

Tenemos el siguiente formulario:

<form>
    <div>
        <label for="email">Email:</label>
        <input id="email" type="email" />
    </div>
    <div>
        <label for="url">URL:</label>
        <input id="url" type="url" />
    </div>
    <div>
        <label for="month">Mes:</label>
        <input type="month" name="month" id="month" min="2022-06" />
    </div>
    <div>
        <label for="number">Mínimo 1 y máximo 100:</label>
        <input id="number" type="number" min="1" max="100" />
    </div>
    <div id="message">Aquí va el mensaje de validación</div>
</form>

En este HTML es importante destacar el atributo type de cada <input>, porque en base a este type, el navegador realizará la validación correspondiente:

Ahora el código JavaScript:

const form = document.querySelector('form');
const message = document.querySelector('#message');

form.addEventListener('input', addMessage)

function addMessage(e) {
    const validationMessage = e.target.validationMessage;
    message.innerText = validationMessage || 'Aquí va el mensaje de validación'
}

Explicamos línea por línea:

1. Obtenemos el elemento con la