Para enviar un mensaje personalizado de error al usuario en el navegador cuando se produce una validación fallida en un formulario, puedes utilizar la API de Validación de Constraint de HTML5.
Para hacerlo, sigue los siguientes pasos:
Agrega el atributo "required" en el campo del formulario que quieres validar. Esto hará que el navegador verifique si el campo está vacío antes de enviar el formulario.
Agrega el atributo "pattern" en el campo del formulario que quieres validar. Este atributo permite especificar una expresión regular que el valor del campo debe cumplir para ser considerado válido. Por ejemplo, si deseas validar un campo de correo electrónico, podrías usar la siguiente expresión regular: [a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$.
Agrega el atributo "oninvalid" en el campo del formulario y especifica la función que quieres que se ejecute cuando se produzca una validación fallida. Por ejemplo, podrías usar la siguiente función: this.setCustomValidity('El campo debe ser llenado en el formato correcto.'). Esta función establecerá un mensaje de error personalizado que se mostrará al usuario cuando se produzca una validación fallida.
Aquí hay un ejemplo completo que muestra cómo agregar un mensaje de error personalizado en un campo de correo electrónico:
<form>
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" oninvalid="this.setCustomValidity('El campo debe ser llenado en el formato correcto.')">
<button type="submit">Enviar</button>
</form>
Este código agregará un mensaje de error personalizado que se mostrará al usuario cuando se intente enviar el formulario con un correo electrónico que no cumpla con el patrón especificado.
