Question

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

}

以上代码设置自定义消息，但不会自动显示。只有在此人按下提交按钮或其他内容时才会显示。

Answer 1

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

Answer 2

collections.defaultdict

reportValidity（）方法将触发HTML5验证消息。

Answer 3

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

我的解决方案是使用JavaScript在每个<label>，<input>和{<select>上创建一个属性（我选择＆＃34;数据无效＆＃34;） {1}}包含validationMessage。

然后是一些CSS ...

<textarea>

...显示错误消息。

<强>限制

这只有在每个元素都有标签的情况下才有效。如果将属性放在元素本身上，它将无效，因为label:after { content: attr(data-invalid); ... }元素不能包含<input>伪元素。

<强>演示

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

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

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

4 个答案: