Set custom error message when using pattern attribute in HTML5 not working in IE 11

Question

I have the following HTML code:

<form role="search" id="searchform" action="/search" method="get">
      <input value="" name="query" type="search" placeholder="" required="" pattern="^[a-zA-Z_0-9\s]+$">
      <button type="submit"><i class="ion ion-ios-search"></i></button>
</form>

and Javascript code:

document.getElementsByName("query")[0].oninvalid = function (ev) {
  ev.preventDefault();
  ev.target.setCustomValidity( 'Only numbers, letters and space are allowed !' );
}

Seems that work only in Firefox, Chrome and Safari but not in Internet Explorer 11.

Not working mean that appear standard message like: You must use this format:

What I missed ?

Answer 1

When you use pattern check, the error message is defined in the title attr. Change for :

<input value="" name="query" type="search" placeholder="" required="" pattern="^[a-zA-Z_0-9\s]+$" title="Only numbers, letters and space are allowed !">

and remove your JS

Answer 2

As taken form this answer , constraint validation messages do work in IE11 with:

element.setCustomValidity("error message") .

Done inline using the oninvalid attribute:

<form role="search" id="searchform" action="/search" method="get">
  <input value="" 
         name="query" 
         type="search" 
         placeholder="" 
         required="" 
         pattern="^[a-zA-Z_0-9\s]+$"
         oninvalid="setCustomValidity('Only numbers, letters and space are allowed!')" 
         oninput="setCustomValidity('')">
  <button type="submit"><i class="ion ion-ios-search"></i></button>
</form>

Also, might want to clear the message oninput :

oninput="setCustomValidity('')"