JavaScript

フォーム イベントに応答する

JavaScript を使うと、フォーム上でのユーザー操作に応答したり、その他のフォーム項目を表示したり、フォームを送信したりなど、さまざまなことができます。

ユーザーがフォームの追加コントロールを入力できるようにする

アンケート フォームを作成するとします。ユーザーが 1 つのオプションを選択した後で、その選択内容に関連する特定の質問をする追加の <input> を表示する必要があります。関連する <input> 要素のみを表示するにはどうすればよいでしょうか。

JavaScript を使用すると、関連する <input type="radio"> が現在選択されている場合にのみ、<input> を表示できます。

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

デモ用の JavaScript コードを見てみましょう。aria-controls 属性と aria-expanded 属性に気づきましたか？これらの ARIA 属性を使用すると、追加のフォーム コントロールの表示 / 非表示をスクリーン リーダーのユーザーが把握しやすくなります。

ユーザーがページを離れることなくフォームを送信できるようにする

コメント フォームがあるとします。読者がコメントを追加してフォームを送信したとき、ページを更新しなくてもすぐにコメントを確認できれば理想的です。

そのためには、onsubmit イベントをリッスンし、event.preventDefault() を使用してデフォルトの動作を無効にし、Fetch API を使用して FormData を送信します。

対応ブラウザ

  • 42
  • 14
  • 39
  • 10.1

ソース

バックエンド スクリプトは、POST リクエストがブラウザ（フォーム要素の action 属性で method="post" を使用）または JavaScript（fetch() リクエストなど）から発信されたように見えるかどうかを確認できます。

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

動的コンテンツの変更について、常にスクリーン リーダーのユーザーに通知します。aria-live="polite" 属性を設定した要素を HTML に追加し、変更後に要素のコンテンツを更新します。たとえば、ユーザーがコメントを送信したら、テキストを「コメントが正常に投稿されました」に変更します。

詳しくは、ARIA ライブ リージョンをご覧ください。

JavaScript による検証

エラー メッセージがサイトのスタイルやトーンに沿ったものであることを確認する

デフォルトのエラー メッセージの文言はブラウザによって異なります。同じメッセージをすべてのユーザーに表示し、メッセージをサイトのスタイルとトーンに合わせるにはどうすればよいでしょうか。Constraint Validation API の setCustomValidity() メソッドを使用して、独自のエラー メッセージを定義します。

ユーザーにリアルタイムでエラーを通知する

フォーム検証用の組み込み HTML 機能は、データがバックエンドに送信される前に、無効なフォーム フィールドについてユーザーに通知する効果があります。ユーザーがフォームの入力欄を離れたらすぐに通知した方がよいと思いませんか？

要素がフォーカスを喪失したときに発生する blur イベントをリッスンし、ValidityState インターフェースを使用して、フォーム コントロールが無効かどうかを検出します。

入力したパスワードがユーザーに表示されることを確認する

<input type="password"> に入力したテキストは、ユーザーのプライバシーを尊重するため、デフォルトでは不明瞭化されます。<button> を表示して、入力したテキストの表示を切り替えて、ユーザーがパスワードを入力しやすくします。

デモをお試しください。[Show Password] <button> を使用して、入力したテキストの表示を切り替えます。このプログラムの仕組みを見てみましょう。[Show Password] をクリックすると、パスワード フィールドの type 属性を type="password" から type="text" に変更し、<button> のテキストが「Hide Password」に変わります。

[Show Password] ボタンにアクセスできるようにすることが重要です。aria-controls 属性を使用して、<button> を <input type="password"> と接続します。

パスワードが現在表示されているか非表示になっているかをスクリーン リーダーのユーザーに通知するには、aria-live="polite" で非表示要素を使用し、それに応じてテキストを変更します。スクリーン リーダーのユーザーが、パスワードの表示や、他の誰かにパスワードが表示されていることを認識できるようにすることが重要です。

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

詳しくは、パスワード表示オプションを実装する方法をご覧ください。

関連情報