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

Question

我想知道是否有任何方法以编程方式显示HTML5验证错误,使用JavaScript函数.

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

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

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

}

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

Answer 1

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

Answer 2

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

reportValidity() method will trigger HTML5 validation message.

Answer 3

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

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

然后一些CSS...

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

... 显示错误消息。

限制

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

演示

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