Question

我正在寻找一种方法来设置当元素获得 required 属性时弹出的“工具提示”的初始消息。消息文本已本地化，因此当语言为非英语时，会呈现未完成的外观。

更改/显示验证消息的代码如下：

    document.querySelector("#imIn").addEventListener("change", function (e) {
        e.target.setCustomValidity("");
        e.target.checkValidity();
    });

    document.querySelector("#imIn").addEventListener("invalid", function(e) {
        e.target.setCustomValidity(window.app.selectCountryText);
    });

最初悬停时

触发验证时

验证后：“工具提示”消息设置为与验证消息相同
但在（即）瑞典语中，它变成了这样：

在触发验证之后：

有没有办法设置初始文本或任何建议的修复？

Answer 1

简而言之，当页面加载时，将自定义有效性设置为单个空格。这将删除“工具提示”

挑战在于，如果您不设置初始自定义有效性消息，则会使用默认值……而默认值并不总是合适的。

如果您想替换默认值，请在您的页面最初加载时为该字段设置自定义有效性消息 - 例如，您可以将一个函数附加到您的正文的已加载操作，如下所示：

<body onload="init()">
   ...your web page here
</body>
<script>
   function init(){
      document.querySelector("#imIn").setCustomValidity('your default message');
   }
</script>

这将在您的页面加载时运行，用您自己的替换内置默认文本。

话虽如此……我确实理解您的挑战！如果您在页面加载时还不知道用户的语言，那么您将不知道用什么语言显示该自定义有效性。因此，我建议您考虑 将自定义有效性设置为单个空格 这足以完全消除不适当的默认消息，而不会生成任何其他消息（'工具提示根本不会显示）。

您可能希望在一个简单的代码块中为所有输入字段执行此操作，如下所示：

   [].forEach.call(document.querySelectorAll('input'), (e)=>{
      e.setCustomValidity(' ');
   });

此代码可能会进入上面显示的 init() 函数，而不是将有效性消息设置为“您的默认消息”的行。

当然，在随后重新加载页面时，您现在可能已将用户的语言选择存储在查询字符串、cookie 或会话中，因此您可以调整代码以在没有所需信息的情况下使用单空格方法计算对语言敏感的消息。

请注意 - 就目前而言，此方法确实将输入字段的有效性标志设置为 false，并将激活任何专门针对无效字段的 css。这可以通过遵循 setCustomValidity(' ') 指令并请求使用 checkValidity() 重新评估该字段的有效性来解决；因为该字段并不是真的无效，所以应该将其标记为有效。通常，这会消除因自定义单空间有效性消息触发有效性问题而产生的任何不良影响，并为您留下一个可供使用的表单，并且没有任何内置工具提示。

最终代码：

<body onload="init()">
   ...your web page here
</body>
<script>
   function init(){
      [].forEach.call(document.querySelectorAll('input'), (e)=>{
         e.setCustomValidity(' ');
         e.checkValidity();
      });
   }
</script>

HTML5 表单验证初始“工具提示”消息

1 个答案: