0

A la contraseña le dí el atributo de

pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$'

lo que este atributo hace es pedir que la contraseña tenga como minimo 8 caracteres, una minuscula, una mayuscula y un numero.

Si es que yo le doy al submit sin haber completado los requisitos me salta un mensaje diciendo "Utiliza un formato que coincida con el solicitado" que supongo que es un mensaje por defecto del navegador.

TL;DR: me gustaria personalizar el mensaje por defecto del navegador cuando no cumplo los requisitos

2 respuestas 2

1

Con jQuery accedes a la propiedad de si es válido o no de acuerdo al patrón marcado en el input y cambiar el mensaje con setCustomValidity.

$("input[name=contrasena]").on("invalid", function() {
   this.setCustomValidity("Este es mi mensaje personalizado");
});

Puedes ver un ejemplo funcionando aquí. Sacado de esta respuesta.

0

Suponiendo que tu cuentas con un id puedes asignárselo a una variable en Javascript:

var input = document.getElementById('username');

Después podrás validar si el input realizó la acción de manera inválida, usarás event.target.setCustomValidity con el nuevo mensaje que se desea:

input.oninvalid = function(event) {
    event.target.setCustomValidity('Este es mi mensaje de ejemplo.');
}

Prueba con eso, espero te ayude.

2
  • Gracias, sabrías si podría personalizar el mensaje dependiendo de que falte en la contraseña, si no introdujo numeros "Mensaje 1", si no introdujo letras mayusculas "Mensaje 2", entre otros Commented el 10 jul. 2018 a las 20:38
  • La verdad nunca he validado de tal modo, normalmente cuando lo utilizo generalizo la respuesta de error, algo como "Su contraseña debe contar con al menos una mayúscula y un número.". Supongo que es posible si validas el contenido de la contraseña y según sea el caso cambias el valor del event.target.setCustomValidity(). Fue un placer ayudarte. Commented el 10 jul. 2018 a las 22:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.