Validación de Formularios en JavaScript con setCustomValidity

Es posible usar librerías JavaScript para validación de formulario o podemos Validar formularios HTML de forma Nativa sin JavaScript, pero también podemos usar una funcionalidad nativa para crear validaciones personalizadas.

setCustomValidity

El método setCustomValidity forma parte de la API de validación de formularios en HTML5 y permite asignar un mensaje de error personalizado a un campo de un formulario.


field.setCustomValidity(message);

Se puede usar la pseudo-clase :invalid para indicar cuando un campo contiene un error.

Ejemplo:

Para utilizar setCustomValidity, es necesario acceder al campo del formulario que se desea validar y llamar al método con el mensaje de error que se desea mostrar:


const field = document.getElementById('name');

field.addEventListener('input', function () {
    if (field.value.length < 3) {
        field.setCustomValidity('El nombre debe tener al menos 3 caracteres.');     // invalid
    } else {
        field.setCustomValidity('');                                                // valid
    }
});

Validaciones Comunes

1.- Validación de Correo Electrónico

Para validar un correo electrónico, puedes utilizar una expresión regular:


const field = document.getElementById('email');

field.addEventListener('input', function () {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailRegex.test(field.value)) {
        field.setCustomValidity('Ingresa un correo electrónico válido.');
    } else {
        field.setCustomValidity('');
    }
});

2.- Validación de Edad

Para verificar que un usuario tenga una edad mínima (por ejemplo, 18 años):


const field = document.getElementById('age');

field.addEventListener('input', function () {
    if (parseInt(field.value) < 18) {
        field.setCustomValidity('Debes tener al menos 18 años para registrarte.');
    } else {
        field.setCustomValidity('');
    }
});

2.- Validación de Fecha

Para verificar que un campo contenga una fecha válida, se puede usar:


const field = document.getElementById('date');

field.addEventListener('input', function () {
    if (!parseInt(new Date(field.value)) {
        field.setCustomValidity('Debes tener al menos 18 años para registrarte.');
    } else {
        field.setCustomValidity('');
    }
});

Validación completa

Creamos un formulario con tres campos a los cuales agregaremos validación:


<form id="formRegister" novalidate>
    <label for="name">Nombre</label>
    <input type="text" id="name" name="name">

    <label for="email">Email</label>
    <input type="email" id="email" name="email">

    <label for="phone">Teléfono</label>
    <input type="text" id="phone" name="phone" placeholder="(XXX) XXX-XXXX" maxlength="14">

    <button type="submit">Enviar</button>
</form>

Agregarmos un estilo para resaltar los campos inválidos usando la pseudo-clase :invalid


input:invalid { border-color: red; }

En JavaScript creamos tres funciones (validateName, validateEmail y validatePhone) para validar los campos cuando el usuario escribe y cuando se intenta enviar el formulario.


document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('formRegister');
    const name = document.getElementById('name');
    const email = document.getElementById('email');
    const phone = document.getElementById('phone');

    function validateName() {
        if (name.value.length < 3) {
            name.setCustomValidity('El nombre debe tener al menos 3 caracteres.');
        } else {
            name.setCustomValidity('');
        }
    }

    function validateEmail() {
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!emailRegex.test(email.value)) {
            email.setCustomValidity('Ingresa un correo electrónico válido.');
        } else {
            email.setCustomValidity('');
        }
    }

    function validatePhone() {
        const phoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/;
        if (!phoneRegex.test(phone.value)) {
            phone.setCustomValidity('El teléfono debe tener formato: (XXX) XXX-XXXX');
        } else {
            phone.setCustomValidity('');
        }
    }

    // validate on input
    name.addEventListener('input', validateName);
    email.addEventListener('input', validateEmail);
    phone.addEventListener('input', validatePhone);

    // validate on submit
    form.addEventListener('submit', (e) => {
        validateName();
        validateEmail();
        validatePhone();

        if (!form.checkValidity()) {
            e.preventDefault();
            form.reportValidity();
        }
    });
});

Puedes ver el resultado en Demo: Validación Básica con setCustomValidity.

Validación Genérica

Podemos generalizar la validación de formularios, para ello usaremos los atributos data-validate para definir el tipo de validación y data-message para el mensaje de error en cada campo del formulario.


<form id="formRegister" novalidate>
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name" 
        data-validate="required" data-message="El nombre es obligatorio.">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" 
        data-validate="email" data-message="El correo no tiene el fomato correcto">

    <label for="phone">Teléfono:</label>
    <input type="text" id="phone" name="phone" placeholder="(XXX) XXX-XXXX"
        data-validate="phone" data-message="El teléfono debe tener formato: (XXX) XXX-XXXX">

    <label for="fecha">Fecha Registro</label>
    <input type="date" id="fecha" name="fecha" 
        data-validate="date" data-message="Ingresar una fecha válida.">

    <label for="message">Mensaje</label>
    <textarea id="message" name="message" 
        data-validate="required" data-message="Ingrese su mensaje."></textarea>

    <button type="submit">Enviar</button>
</form>

Agregamos estilos para resaltar los campos inválidos, además de un indicador * a las etiquetas de los campos requeridos.


input:invalid { border-color: red; }
textarea:invalid { border-color: red; }
label:has(+ input[data-validate="required"]):after { content: '*'; color: red; }

Creamos una clase genérica CustomValidate para validar formularios, esta clase recibe como parámetro el formulario a validary tendrá seis tipos de validación:

required: para definir que el campo es obligatorio.
email: el campo debe tener el formato de correo electrónico.
phone: el campo debe tener el formato de teléfono: (XXX) XXX-XXXX.
date: el campo debe tener una fecha válida.
number: el campo debe contener un número (entero, decimal, negativo, etc).
integer: el campo debe ser un número entero.


/**
 * CustomValidate
 */

class CustomValidate {

    constructor(target) {
        const form = document.querySelector(target);
        const fields = form.querySelectorAll('input[data-validate], textarea[data-validate]');

        // validate on input/blur
        fields.forEach(field => {
            field.addEventListener('input', this.validateField);
            field.addEventListener('blur', this.validateField);
        });

        // validate on submit
        form.addEventListener('submit', (e) => {
            // validate fields
            fields.forEach((field) => {
                this.validateField(field);
            });

            // check form
            if (!form.checkValidity()) {
                e.preventDefault();
                form.reportValidity();
            }
        });
    }

    validateField(e) {
        let field = (e.currentTarget) ? e.currentTarget : e;
        let value = field.value.trim();
        let type = field.dataset.validate;
        let valid = true;

        switch (type) {
            case 'required':
                valid = (value.length > 0);
                break;
            case 'email':
                valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
                break;
            case 'phone':
                valid = /^\(\d{3}\) \d{3}-\d{4}/.test(value);
                break;
            case 'date':
                valid = !isNaN(new Date(value));
                break;
            case 'number':
                valid = !isNaN(parseFloat(value));
                break;
            case 'integer':
                valid = /^\d+$/.test(value);
                break;
        }

        if (valid) {
            field.setCustomValidity('');
        } else {
            field.setCustomValidity(field.dataset.message);
        }
    }
}

Finalmente importamos la clase e inicializamos la validación del formulario:


<script src="custom-validate.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    new CustomValidate('#formRegister');
});
</script>

Puedes ver el resultado en Demo: Validación Genérica con setCustomValidity.

Conclusión

El método setCustomValidity facilida la validación de formularios aprovechando la interfaz nativa para mostrar los mensajes de error y la pseudo-clase :invalid para dar estilos a los campos inválidos. Esto hace que la validación sea mas sencilla y eficiente.