HTML5でコーディングしたinput要素に対し、入力値が変わった瞬間フロントでのバリデーションをおこなうためreportValidity()
を実行するようにした。
// リアルタイムバリデーション
$('form input').on('change', function(){
this.reportValidity();
});
しかしreportValidity()
はIE11非対応のメソッドだったので、IE11ではエラーを起こしその他のJSも実行されなくなってしまっていた。
そのためブラウザ判定の処理を追加し、IE以外の場合でのみバリデーションをおこなうように変更した。
// ブラウザ判定
userAgent = window.navigator.userAgent.toUpperCase();
// IE以外のブラウザでアクセス
if (userAgent.indexOf('MSIE') === -1 && userAgent.indexOf('TRIDENT') === -1) {
// リアルタイムバリデーション
$('form input').on('change', function(){
this.reportValidity();
});
}
上記コード2行目でユーザーエージェントを取得し、文字列判定でIEかどうかを判定。
IE以外の場合はif文の中身が実行され、バリデーションの処理が走るようになる。