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

【问题标题】：How to manually show a HTML5 validation message from a JavaScript function?如何从 JavaScript 函数手动显示 HTML5 验证消息？
【发布时间】：2013-07-09 14:03:38
【问题描述】：

我想知道是否有任何方法可以使用 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");

}

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

【问题讨论】：

您必须触发表单提交才能显示消息
http://jsfiddle.net/tjXG3/2/ 使用 jquery

标签： javascript html validation html5-validation

【解决方案1】：

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

【讨论】：

reportValidity() 方法很好，但它给出了自己的错误消息，如何使用 reportValidity 和自定义错误消息？
@PratikKumar 我相信你可以使用HTMLSelectElement.setCustomValidity

【解决方案2】：

var applicationForm = document.getElementById("applicationForm");    
if (applicationForm.checkValidity()) {
  applicationForm.submit();
} else {
  applicationForm.reportValidity();
}

reportValidity() 方法将触发 HTML5 验证消息。

【讨论】：

找了很久...谢谢！！

【解决方案3】：

这个问题是一年多前提出的，但我最近也遇到了一个很好的问题......

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

然后是一些 CSS...

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

...显示错误信息。

限制

这只有在每个元素都有标签的情况下才有效。如果将属性放在元素本身上，它将不起作用，因为<input> 元素不能有:after 伪元素。

演示

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

【讨论】：

【解决方案4】：

正如@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;
    }
}

【讨论】：