1

¿Como le coloco un mensaje personalizado a las alertas de Firefox, Chrome y Edge cuando los Inputs tipo: text, number, tel, etc. No hayan sido rellenados o cuando tengan contenido erroneo? Por ejemplo:

Correo: ¿Vacio?

{ $Mensaje("Por favor coloca un Correo Valido para Contactar contigo.") }

Correo:

correo1234@URL (URL invalida sin ".com", que en este caso el navegador se conforma con tener solo una letra luego del "@")

{ $Mensaje("Por favor verifica el Correo.") }

Quiero modificar este mensaje "Rellene este campo":

Foto de Mensaje de alerta en las etiquetas Inputs Erroneas

2
  • Hola, te damos la bienvenida a Stack Overflow en español. Aunque la pregunta es válida y pertinente al sitio, sería idea que incluyeras algo de código (lo que lleves y/o lo que hayas intentado). Lee Cómo preguntar y ejemplo mínimo verificable para más información. Y completa el recorrido de bienvenida para aprender más sobre el sitio (y ganar tu primera medalla).
    – Alvaro Montoro
    el 18 ene. 2018 a las 2:24
  • 1
    Muchas Gracias por la bienvenida! La cuestion es que no coloque codigo porque realmente no sabia ni por donde empezar, pero luego de buscar y buscar todo el dia di con la solucion... muy sencilla en realidad, la encontre en StackOverflow en ingles. voy a postearla como respuesta! Muchas gracias de antemano :D
    – JLAcostaE
    el 18 ene. 2018 a las 3:14

2 respuestas 2

3

Esto se puede hacer definiendo tus propios mensajes de error con setCustomValidity.

Lo que harías sería leer el evento onInvalid que se lanza cuando el campo es inválido (p.e. si es requerido pero se deja vacío, o si tiene un patrón que no se cumple), comprobar qué es lo que falló y mostrar un mensaje personalizado que definirías con setCustomValidity. También deberías añadir la lógica cuando se cambie el campo para quitar el mensaje si se solucionó el problema.

Aquí voy a dejar un ejemplo para un email: se comprueba que no esté vacío, que tenga una arroba (@) y que tenga un ".com" después de la @:

function comprobarNombre(valor, campo) {
  
  var mensaje = "";
  
  // comprobar los posibles errores
  if (this.value == "") {
    mensaje = "El email no puede estar vacío";
  } else if (this.value.indexOf("@") < 0) {
    mensaje = "El email debe contener una @";
  } else if (this.value.indexOf(".com", this.value.indexOf("@")) < 0) {
    mensaje = "El email debe contener .com detras de la @";
  } 
  
  // mostrar/resetear mensaje (el mensaje se resetea poniendolo a "")
  this.setCustomValidity(mensaje);
}

var email = document.querySelector("#email");

// cuando se cambie el valor del campo o sea incorrecto, mostrar/resetear mensaje
email.addEventListener("invalid", comprobarNombre);
email.addEventListener("input", comprobarNombre);
<form>
  <input type="text" id="email" name="email" value="" required />
  <input type="submit" value="Enviar" />
</form>

Puedes hacer lo mismo para tu campo de email, comprobando que contenga sólo una @, que el primer carácter no sea un ".", etc. (también podrías ponerle el tipo "email" al input que hará muchas de esas comprobaciones por ti).

3
  • Excelente amigo muchas gracias! Esto es lo que estaba buscando desde hace tantas horas! te agradesco, para lo del correo seria colocar la verificacion para el .com como string? o me equivoco?
    – JLAcostaE
    el 18 ene. 2018 a las 3:29
  • @JLAcostaE he actualizado la respuesta para que sea un email en lugar de un nombre y que compruebe que no esté vacío, que tenga una @ y que tenga un .com detrás de la @. Dime si así está mejor
    – Alvaro Montoro
    el 18 ene. 2018 a las 3:35
  • Excelente, muchas gracias Alvaro! Si ya entiendo todo, para los demas campos ya se que tengo que hacer, muchas gracias por toda tu ayuda!
    – JLAcostaE
    el 18 ene. 2018 a las 3:38
1

La solucion a mi pregunta es la siguiente:

Usando este simple parametro dentro de la etiqueta Input se puede modificar el mensaje de alerta en el caso de haya error en el Input que seria:

oninvalid="this.setCustomValidity('El mensaje que se desea mostrar')"

Para obtener el input siguiente:

<input type="text" name="nombre" required oninvalid="this.setCustomValidity('Por favor ingresa tu nombre')">

Y con eso obtuve el resultado que queria, sin embargo sigo en duda para verificar el campo de correo si no esta correcto... Sigo investigando y esperando que alguien pueda ayudarme porque realmente no se por donde empezar este codigo, soy nuevo en esto...

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.