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

【问题标题】：Default HTML5 form validation not showing error message on IE browser默认 HTML5 表单验证未在 IE 浏览器上显示错误消息
【发布时间】：2017-12-13 23:17:44
【问题描述】：

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

问题： 有没有什么简单的方法来改变如何显示类似 Chrome 的消息？这是基于一些伪类还是什么？有没有人遇到过类似的问题？

【问题讨论】：

"IE下划线无效字段，但错误消息仅在用户悬停字段时显示。"你确定吗？尝试提交表单确实会导致 IE 为我显示工具提示，而无需悬停该字段。
你用的是哪个版本的IE？
Windows 10 上的 IE11。你呢？你应该提供一个测试用例。
我在每个 IE10、IE11 和 Edge 上都进行了测试，但问题仍然存在。我会尝试录制一段视频来展示它的外观
我想我不清楚。通过测试用例，我的意思是代码，在问题中。不是视频，虽然这可以帮助我们了解它的外观。

标签： html css internet-explorer pseudo-class html5-validation

【解决方案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/，看看这是否是你要找的。希望这会有所帮助！

【讨论】：