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

Question

I'm looking for a way to set the initial message of the "tooltip" that pops-up when an element got the required attribute.我正在寻找一种方法来设置当元素获得required属性时弹出的“工具提示”的初始消息。 The message text is localised, so when the language is non English, it gives an unfinished appearance.消息文本是本地化的，因此当语言不是英语时，它会呈现未完成的外观。

The code that changes/displays the validation message is the following:更改/显示验证消息的代码如下：

    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);
    });

Initially when hovering最初悬停时

When triggering the validation触发验证时

After validation: "tooltip" message is set to the same as validation message验证后：“工具提示”消息设置为与验证消息相同
But in (ie) Swedish it becomes this:但在（即）瑞典语中，它变成了这样：

And after the validation is triggered:并在触发验证后：

Is there any way to set the initial text or any suggested fix?有没有办法设置初始文本或任何建议的修复？

Answer 1

in short, when the page loads, set the custom validity to a single space.简而言之，当页面加载时，将自定义有效期设置为单个空格。 This removes the 'tooltip'这将删除“工具提示”

The challenge is, that if you don't set an initial custom validity message, then a default is used...and the default isn't always appropriate.挑战在于，如果您不设置初始自定义有效性消息，则使用默认值......并且默认值并不总是合适的。

If you want to replace the default, set a custom validity message for the field when your page initially loads - for example, you might attach a function to your body's onloaded action as demonstrated here:如果要替换默认值，请在页面初始加载时为该字段设置自定义有效性消息 - 例如，您可以将 function 附加到正文的加载操作，如下所示：

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

This will run as your page loads, replacing the built-in default text with your own.这将在您的页面加载时运行，用您自己的替换内置的默认文本。

THAT SAID... I do understand your challenge, If you don't already know the user's language when the page loads.那说...我确实理解您的挑战，如果您在页面加载时还不知道用户的语言。 then you wouldn't know what language to display that custom validity in, So, I'd suggest that you consider setting the custom validity to a single space which is enough to wipe out the inappropriate default message entirely, without generating any other message (the 'tooltip will not show at all).那么您将不知道以哪种语言显示该自定义有效性，因此，我建议您考虑将自定义有效性设置为单个空格，这足以完全消除不适当的默认消息，而不会生成任何其他消息（ '工具提示根本不会显示）。

You might wish to do this for all of your input fields in one easy block of code as follows:您可能希望在一个简单的代码块中为所有输入字段执行此操作，如下所示：

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

This code might go into the init() function shown above, instead of the line setting the validity message to 'your default message'.此代码可能会将 go 放入上面显示的 init() function 中，而不是将有效性消息设置为“您的默认消息”的行。

of course on subsequent reloads of the page, you probably now have the user's language choice stored in the querystring, cookie or session so you can adapt your code to use the single space approach on if you don't have the info needed to calculate a language-sensitive message.当然，在随后重新加载页面时，您现在可能将用户的语言选择存储在查询字符串、cookie 或 session 中，因此如果您没有计算所需的信息，您可以调整代码以使用单空格方法语言敏感的消息。

Be aware - as it stands, that this method does set the input field's validity flag to false and will activate any css which specifically targets invalid fields.请注意 - 就目前而言，此方法确实将输入字段的有效性标志设置为 false，并将激活任何专门针对无效字段的 css。 This can be overcome by following your setCustomValidity(' ') instruction with a request for the validity of the field to be re-assessed using the checkValidity();这可以通过遵循您的 setCustomValidity(' ') 指令并请求使用 checkValidity() 重新评估该字段的有效性来解决； Because the field is not REALLY invalid, this should mark it as valid.因为该字段并非真的无效，所以应该将其标记为有效。 Normally this will reverse any ill effects of having triggered the validity issue with your custom single-space validity message and will leave you with a form ready to use, and with none of the inbuilt tooltips.通常，这将逆转您的自定义单空格有效性消息触发有效性问题的任何不良影响，并为您提供一个可以使用的表单，并且没有任何内置工具提示。

THE FINAL CODE:最终代码：

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

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

问题描述

1 个解决方案

解决方案1
1 2021-07-28 15:50:16

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

问题描述

1 个解决方案

解决方案1 1 2021-07-28 15:50:16

解决方案1
1 2021-07-28 15:50:16