How to Translate Step Attribute Validation Error Message for Invalid value?

Question

I’m facing an issue with the translation of an HTML5 validation error message where I have used the input type field with min, max, and step attributes.

<input type="number" min="2" max="20" step="2" >

Therefore the allowed user values in the input field are 2,4,6 etc... and so on.

So whenever a user enters an invalid value which is between the min and max values specified in the input type, an HTML5 validation error message is displayed, which tells the user to select the two nearest valid values as shown in the image below.

Error Message Shown: "Please enter a valid value. The two nearest valid values are 14 and 16."

Now the issue is I want to translate this message into German. I’ve come across these answers on Stackoverflow like

HTML5 form required attribute. Set custom validation message?

changing the language of error message in required field in html5 contact form

where they are using the setCustomValidity() method to set a custom message. However, using that overrides the entire message and I’m unable to show the translated message with the nearest possible values that show up in the default error message.

Error Message Shown: "Bitte geben sie einen gültigen Wert ein."

Here’s a JSFiddle where I have tested both options.

How can I show this message in German along with those two values? Any help will be appreciated. Thanks.

Answer 1

You can implement it like this:

    <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 you call setCustomValidaty() with a value that is produced by the getErrorMessage() function, which you have to implement.

Something similar to this:

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 + ".";
}