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

【问题标题】：HTML5 Form Validation Initial "Tooltip" MessageHTML5 表单验证初始“工具提示”消息
【发布时间】：2021-02-03 11:14:07
【问题描述】：

我正在寻找一种方法来设置当元素获得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);
    });

最初悬停时

触发验证时

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

验证触发后：

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

【问题讨论】：

标签： javascript html forms validation tooltip

【解决方案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>

【讨论】：