0
344
Vistas¿Cómo traducir el mensaje de error de validación de atributo de paso para un valor no válido?
Tengo un problema con la traducción de un mensaje de error de validación de HTML5 en el que he usado el campo de tipo de entrada con los atributos mínimo, máximo y paso.
<input type="number" min="2" max="20" step="2" >Por lo tanto, los valores de usuario permitidos en el campo de entrada son 2,4,6, etc... y así sucesivamente.
Entonces, cada vez que un usuario ingresa un valor no válido que se encuentra entre los valores mínimo y máximo especificados en el tipo de entrada, se muestra un mensaje de error de validación de HTML5, que le indica al usuario que seleccione los dos valores válidos más cercanos, como se muestra en la imagen a continuación.
Mensaje de error mostrado: "Ingrese un valor válido. Los dos valores válidos más cercanos son 14 y 16".
Ahora el problema es que quiero traducir este mensaje al alemán. Me he encontrado con estas respuestas en Stackoverflow como
Atributo obligatorio del formulario HTML5. ¿Establecer un mensaje de validación personalizado?
cambiar el idioma del mensaje de error en el campo requerido en el formulario de contacto html5
donde están usando el método setCustomValidity() para establecer un mensaje personalizado. Sin embargo, usar eso anula todo el mensaje y no puedo mostrar el mensaje traducido con los valores posibles más cercanos que aparecen en el mensaje de error predeterminado.
Mensaje de error mostrado: "Bitte geben sie einen gültigen Wert ein".
Aquí hay un JSFiddle donde probé ambas opciones.
¿Cómo puedo mostrar este mensaje en alemán junto con esos dos valores? Cualquier ayuda será apreciada. Gracias.
1 Respuestas
Responde la pregunta0
Puedes implementarlo así:
<form action="#" method="post"> <input id="with_translation" oninvalid="setCustomValidity(getErrorMessage())" oninput="setCustomValidity('')" type="number" min="2" max="20" step="2"> <input type="submit"> <p> Insert Values like 3,5,7,9.. to trigger error </p> </form> oninvalid llama a setCustomValidaty() con un valor producido por la función getErrorMessage() , que debe implementar.
Algo parecido a esto:
function getErrorMessage() { const value = document.getElementById("with_translation").value; const number = new Number(value); const lower = number - 1; const upper = number + 1; return "Bitte geben sie einen gültigen Wert ein. Die nächsten gültigen Werte sind " + lower + " und " + upper + "."; }