如何从JavaScript函数手动显示HTML5验证消息？

Posted 2021-03-28

我想知道是否有任何方法可以使用javascript函数以编程方式显示html5验证错误。

这对于必须检查电子邮件复制的情况很有用。例如，一个人输入一封电子邮件，按下“提交”按钮，然后必须通知此电子邮件已经注册或者其他内容。

我知道还有其他方法可以显示这样的错误，但我希望以与验证错误消息的显示方式相同的方式显示它（例如无效的电子邮件，空字段等）。

的jsfiddle：http://jsfiddle.net/ahmadka/tjXG3/

HTML表格：

<form>
    <input type="email" id="email" placeholder="Enter your email here..." required>
    <button type="submit">Submit</button>
</form>

<button id="triggerMsg" onclick="triggerCustomMsg()">Trigger Custom Message</button>

JavaScript的：

function triggerCustomMsg()
{
    document.getElementById("email").setCustomValidity("This email is already used");

}

上面的代码设置自定义消息，但不会自动显示。只有当用户按下提交按钮或其他内容时才会显示。

答案

您现在可以使用HTMLFormElement.reportValidity（）方法，当时它在除Internet Explorer之外的大多数浏览器中实现（请参阅MDN上的Browser compatibility）。它报告有效性错误而不触发提交事件，它们以相同的方式显示。

另一答案

这个问题在一年前被问过，但这是我最近遇到的一个很好的问题......

我的解决方案是使用JavaScript在每个包含<label>的<input>，<select>和<textarea>的validationMessage上创建一个属性（我使用“data-invalid”）。

然后一些CSS ......

label:after {
    content: attr(data-invalid);
   ...
}

...显示错误消息。

限制

这仅适用于每个元素都有标签的情况。如果将属性放在元素本身上，它将无法工作，因为<input>元素不能具有:after伪元素。

演示

http://jsfiddle.net/u4ca6kvm/2/

另一答案

由@Diego指导你可以使用form.reportValidity（）; 为了支持IE和Safari包含这个polyfill，它只是工作：

if (!HTMLFormElement.prototype.reportValidity) {
    HTMLFormElement.prototype.reportValidity = function() {
      if (this.checkValidity()) return true;
      var btn = document.createElement('button');
      this.appendChild(btn);
      btn.click();
      this.removeChild(btn);
      return false;
    }
}