html - 默认 HTML5 表单验证未在 IE 浏览器上显示错误消息

Question

IE 浏览器以不同的方式显示默认的 html5 验证消息。Chrome 或 Firefox，在提交表单后，显示漂亮的气泡/工具提示和错误消息。IE下划线无效字段，但错误消息仅在用户悬停字段时显示。

问题： 有什么简单的方法可以改变如何显示类似 Chrome 的消息？这是基于一些伪类还是什么？你们有没有类似的问题？

Answer 1

您可以使用 oninvalid 事件。

document.getElementById('input').oninvalid = function(e) {
  e.preventDefault(); //prevent default tooltip
  this.style.background = '#f2dede'; //whatever 
  var elem = this.parentNode.getElementsByClassName('tooltiptext')[0]; //select tooltip element

  //show the tooltip
  elem.style.visibility = "visible";
  elem.style.opacity = "1";
}

我做了这个小提琴https://jsfiddle.net/petekeeports/0yxfj3Lr/，看看这是否是你要找的。希望这可以帮助！！