HTML5 エラーメッセージのカスタマイズ

HTML5のフォームバリデーションのメッセージを設定

jQuery

$(function () { $('input').blur(function(e) { // メッセージをリセット e.target.setCustomValidity(''); // 未入力 required if (e.target.validity.valueMissing) { e.target.setCustomValidity('必須'); } // タイプ(email,urlなど)がマッチしない if(e.target.validity.typeMismatch){ e.target.setCustomValidity('型'); } // パターンがマッチしない pattern if (e.target.validity.patternMismatch){ e.target.setCustomValidity('形式'); } // 文字数が超過 maxlength if (e.target.validity.tooLong){ e.target.setCustomValidity('長い'); } // 文字数が不足 minlength if (e.target.validity.tooShort){ e.target.setCustomValidity('短い'); } // 値が大きい max if (e.target.validity.rangeOverflow){ e.target.setCustomValidity('高い'); } // 値が小さい min if (e.target.validity.rangeUnderflow){ e.target.setCustomValidity('低い'); } // ステップがマッチしない step if (e.target.validity.stepMismatch){ e.target.setCustomValidity('ステップ'); } }); });

ブラウザによっては未サポートのものがあり。

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について