默认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/，看看你是否正在寻找。希望这会有所帮助!!