如何翻译无效值的步骤属性验证错误消息？

Question

我在翻译 HTML5 验证错误消息时遇到问题，其中我使用了具有 min、max 和 step 属性的输入类型字段。

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

因此，输入字段中允许的用户值是 2、4、6 等...等等。

因此，每当用户输入介于指定的最小值和最大值之间的无效值时 在输入类型中，显示 HTML5 验证错误消息，告诉用户选择 如下图所示的两个最接近的有效值。

显示错误消息：“请输入一个有效值。两个最接近的有效值是 14 和 16。”

现在的问题是我想把这条消息翻译成德语。我在 Stackoverflow 上遇到过这些答案，比如

HTML5 form required attribute. Set custom validation message?

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

他们在哪里使用 setCustomValidity() 方法来设置自定义消息。 但是，使用它会覆盖整个消息，并且我无法使用默认错误消息中显示的最接近的可能值显示翻译后的消息。

显示错误消息：“Bitte geben sie einen gültigen Wert ein。”

这是JSFiddle，我已经测试了这两个选项。

如何在德语中显示此消息以及这两个值？ 任何帮助将不胜感激。谢谢。

Answer 1

你可以这样实现：

    <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 您调用 setCustomValidaty() 时使用的值由您必须实现的 getErrorMessage() 函数生成。

类似的东西：

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