设置自定义错误消息，使用HTML5模式属性在IE 11

Question

不工作时，我有以下的HTML代码：

<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> 

和Javascript代码：

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

似乎只是在Firefox的工作， Chrome和Safari，但不在Internet Explorer 11中。

不工作意味着出现如下标准消息：You must use this format:

我错过了什么？

Answer 1

当您使用模式检查时，错误消息在标题attr中定义。更改为：

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

，并删除你的JS

Answer 2

由于采取形式this answer， constraint validation消息并在IE11与工作：

element.setCustomValidity("error message")。使用oninvalid属性

完成内联：

<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> 

而且，可能要清除消息oninput：

oninput="setCustomValidity('')"