IE10 の互換モードで jquery.validate.unobtrusive を使うとエラー

最近ハマったのでメモ。解決策は以下の記事を参考にしました。

• JQuery Unobtrusive Validation in IE 7 Compatibility Mode causes "Member Not Found" Error in Page with Form - Stack Overflow
• #12577 ('SCRIPT3: Member not found' with .attr(novalidate or aria-nocomplete)) – jQuery Core - Bug Tracker

エラーの内容

jquery.validate.unobtrusive を IE10の互換モードで利用するとこんなエラーが出ることがあります。

行: 2699
エラー: メンバーが見つかりません。

どうやらページ内に form があるだけで起こるようで、jQuery その他のスクリプトが全滅して全く動かなくなります。怖い。

なんとなく IE10 の互換モードのバグっぽい雰囲気ですが、時間がなかったためあまり詳しく調べることができませんでした。(いいわけ)

jQuery の以下の set メソッド呼び出しで、novalidate という属性を設定しようとしてエラーが発生しているようです。

nodeHook = jQuery.valHooks.button = {
  get: function( elem, name ) {
   var ret;
   ret = elem.getAttributeNode( name );
   return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ?
    ret.nodeValue :
    undefined;
  },
  set: function( elem, value, name ) {
   // Set the existing or create a new attribute node
   var ret = elem.getAttributeNode( name );
   if ( !ret ) {
    ret = document.createAttribute( name );
    elem.setAttributeNode( ret );
   }
   return ( ret.nodeValue = value + "" );
  }
 };

解決策

いろいろな記事を見て回ると、jQuery の中身を書き換えたりする方法もありましたが、ちょっと怖いので互換モードの指定で逃げました。

以下のように X-UA-Compatible で IE が利用可能な最新のレンダリングモードを指定します。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

おわりに

いろいろなところでこの問題がおきてテンション下がりました。

jquery.validate.unobtrusive は ASP.NET MVC のテンプレートに入っているし、form がページ内にあるだけでエラーが起こるので、結構影響大きいのではと思うのですが、全然日本語の記事がなかったので書いてみました。