Default HTML5 form validation not showing error message on IE browser

Question

IE browser has a different way of showing default html5 validation messages. Chrome or Firefox, after submitting form, show pretty bubbles/tool tip with error message. IE underline invalid field, but error message is showing only when user hover field.

Question: Is there any simple way, to change how to display messages similar like Chrome? Is this based on some pseudo-classes or something? Did any of you have a similar problem?

Answer 1

You can use the oninvalid event.

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

I made this fiddle https://jsfiddle.net/petekeeports/0yxfj3Lr/ , see if that is what you are looking for. Hope this helps!!