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

问题描述 投票:12回答:3

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

}

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

javascript html5 validation html5-validation
3个回答
17
投票

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


4
投票

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

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

然后一些CSS ......

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

...显示错误消息。

限制

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

演示

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


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;
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.