概要
Web開発において、フォームバリデーションの実装は避けては通れないタスクです。かつてはJavaScriptで複雑な正規表現を書き、エラーメッセージを動的に生成するライブラリを多用していましたが、現代のフロントエンド開発では、ブラウザ標準のConstraint Validation APIを最大限に活用するのがスマートな選択です。その中核をなすプロパティが「validationMessage」です。
validationMessageプロパティは、HTMLInputElement（およびその他のフォーム関連要素）が現在どのようなバリデーション状態にあるか、その詳細なエラー内容を文字列として保持する読み取り専用のプロパティです。本記事では、このプロパティをJavaScriptで制御し、UXを損なわない洗練されたフォームUIを構築する技術を深掘りします。
詳細解説
validationMessageは、ブラウザが持つ「制約検証」のロジックによって自動的に生成される文字列です。例えば、type=”email”のinput要素に不正な形式の文字列が入力されている場合、このプロパティには「メールアドレスを入力してください」といったブラウザ既定のメッセージが格納されます。
重要なのは、このメッセージがブラウザのロケール設定に基づいている点です。ユーザーのOSやブラウザが日本語環境であれば日本語のメッセージが、英語環境であれば英語のメッセージが自動的に挿入されます。これにより、国際化対応の手間をかけずに標準的なエラー表示を実現できます。
また、このプロパティは「ValidityState」オブジェクトと密接に連携しています。ValidityStateは、valueMissing（必須項目漏れ）、typeMismatch（型不一致）、patternMismatch（正規表現不一致）などの状態をブール値で保持します。validationMessageは、これらのフラグがどれか一つでも真（true）である場合に、最も優先度の高いエラー内容を文字列として出力する仕組みになっています。
ただし、標準のままではデザインの統一感が損なわれるため、多くのWebサイトではCSSでのカスタマイズが求められます。ここで重要になるのが、:invalid疑似クラスと組み合わせて、validationMessageを独自のDOM要素に投影する技術です。
サンプルコード
以下は、標準のツールチップを非表示にし、独自のデザインでエラーメッセージを表示する実装例です。
// HTML構造
//
const form = document.querySelector('#registrationForm');
const emailInput = document.querySelector('#userEmail');
const errorDisplay = document.querySelector('#errorDisplay');
// バリデーションチェックの実行
const validate = () => {
// validity.validがfalseの場合のみメッセージを表示
if (!emailInput.validity.valid) {
errorDisplay.textContent = emailInput.validationMessage;
} else {
errorDisplay.textContent = '';
}
};
// 入力イベントやフォーカスアウト時にチェック
emailInput.addEventListener('input', validate);
emailInput.addEventListener('blur', validate);
// フォーム送信時の挙動制御
form.addEventListener('submit', (e) => {
if (!emailInput.validity.valid) {
e.preventDefault(); // 送信をブロック
validate();
}
});
実務アドバイス
実務においてvalidationMessageを扱う際、シニアデザイナー・エンジニアとして押さえておくべきポイントが3点あります。
第一に「カスタムメッセージのオーバーライド」です。setCustomValidity()メソッドを活用しましょう。validationMessageの内容が標準的すぎてプロダクトのトーン＆マナーに合わない場合は、JavaScriptから任意のメッセージをセットすることができます。ただし、一度カスタムメッセージをセットすると、入力内容が正しくなっても状態がクリアされないため、必ず空文字（””）を渡してリセットする処理を忘れないでください。
第二に「ユーザー体験のタイミング」です。リアルタイムバリデーション（inputイベント）は非常に強力ですが、入力の途中でエラーを出しすぎるとユーザーを苛立たせます。基本的には「フォーカスアウト時（blur）」にチェックを行い、エラーが解消されたタイミングでクリアするように設計するのが、離脱を防ぐコツです。
第三に「アクセシビリティへの配慮」です。validationMessageを独自DOMに表示する場合、スクリーンリーダーがそれを読み上げられるよう、エラー用の要素に「aria-live=”polite”」や「aria-describedby」を適切に設定してください。ブラウザ標準の吹き出しを消すだけでは、支援技術を利用するユーザーがエラーの存在に気づけない可能性があります。
まとめ
validationMessageプロパティは、単なるエラーメッセージの保持者ではありません。ブラウザが提供する強力な検証エンジンと開発者のフロントエンド実装を繋ぐインターフェースです。
標準機能を「古い」と切り捨てるのではなく、その「標準のパワー」を活かしつつ、独自のUIでラッピングする。これが現代のフロントエンドにおける正しいフォーム設計のあり方です。バリデーションロジックを自作して膨大なコードをメンテナンスする時代は終わり、ブラウザの力を信じてその出力をコントロールする。このアプローチにより、保守性が高く、かつユーザーフレンドリーなフォーム体験を実現してください。
本記事で紹介した手法をベースに、さらに複雑なバリデーションが必要な場合は、Constraint Validation APIと独自のロジックを組み合わせたカスタムコンポーネントを作成することをお勧めします。技術の選定において、常に「標準でできることは標準で」という原則を忘れないことが、最高品質のWebデザインへの近道です。
コメント