Drupal 8でAjaxフォームを使用します

キーテイクアウト

• Drupal 8 Ajax APIでは、JavaScriptコードを必要とせずにクリーンで使いやすいフォームを可能にします。これは、フォームの動作の一部をajaxifiedすることで実現できます。
• 電子メール検証ロジックは、フォームの提出を必要とせずに検証をトリガーし、メッセージを印刷するAjaxコールバックに移動できます。これはフォームの一般的な行動であり、Drupal 8でAjaxを理解するための良い運動として機能します。
Ajax APIでは、フォーム動作のカスタマイズが可能です。フォームクラスのAjaxコールバックメソッドは、フォームアレイとフォーム状態オブジェクトを受信し、検証を実行し、検証結果に応じて複数のコマンドでAJAX応答を返します。
• ajaxは、Ajaxクラスを任意のリンクに追加するなど、フォームの外側のDrupal 8でも使用できます。これにより、DrupalはリンクをクリックしたときにHREF属性のURLにAJAX要求を行うことができます。Ajaxコマンドを返し、必要に応じてさまざまなアクションを実行できます。
この記事では、JavaScriptコードの1行を記述せずにDrupal 8 Ajax APIを使用するクリーンな方法を紹介します。この目的のために、以前の記事でDrupal 8のために構築した最初のカスタムフォームに戻り、その動作のいくつかをよりユーザーフレンドリーにするために
• ajaxify
に戻ります。

このフォームの更新されたバージョンは、Demoform（デモモジュール）という名前のこのリポジトリにあります。この記事で書いているコードは、Ajaxと呼ばれる別のブランチでも見つけることができます。リポジトリをクローンして、フォローしたい場合は、開発環境にモジュールをインストールすることをお勧めします。 demoform

デモフォームは、Drupal 8にカスタムフォームを書くことの基本を説明するのに非常に役立ちました。もちろん、それは基本に焦点を当てており、壮大なことは何もありません。

覚えている場合、またはコードを確認した場合、フォームには、構成として保存するメールアドレスを収集する責任のある単一のテキストフィールドが表示されます。フォーム検証は、送信された電子メールに.comの終わりがあることを確認することを担当しています（それに対する不十分な試みですが、フォーム検証の原則を説明するのに十分です）。そのため、ユーザーがフォームを送信すると、構成に新しい電子メールアドレスを保存し、画面に確認メッセージを印刷します。

この記事では、ユーザーが電子メールアドレスの入力が終了した後、フォームを送信せずに検証が自動的にトリガーされ、メッセージが印刷されるように、電子メール検証ロジックをAjaxコールバックに移動します。繰り返しますが、この動作について壮大なものは何もありません。野生の形で頻繁に見られるでしょう（通常、ユーザー名を検証するため）。しかし、それはDrupal 8のAjaxを見るための良い運動です。

ajax form

最初にする必要があることは、general validateform（）からこの側面のみを処理するメソッドに電子メール検証ロジックを移動することです。

<span>/**
</span><span> * Validates that the email field is correct.
</span><span> */
</span><span>protected function validateEmail(array &$form, FormStateInterface $form_state) {
</span>  <span>if (substr($form_state->getValue('email'), -4) !== '.com') {
</span>    <span>return FALSE;
</span>  <span>}
</span>  <span>return TRUE;
</span><span>}</span>

ご存知のように、メールアドレスが.comで終了することを確認するために、ロジックを少し変更しました。

次に、既存の動作がまだ機能することを確認するために、主な検証方法からこのロジックを延期できます。

この方法で、フォームが何らかの形で（プログラムでまたはその他の場合）提出されたとしても、検証は実行されます。

次に、フォーム定義、具体的には電子メールフィールドに目を向け、ユーザーインタラクションに基づいてAJAXリクエストをトリガーする必要があります。これは、ユーザーがフィールドの値を変更し、そこからフォーカスを削除する行為になります：

<span>/**
</span><span> * <span>{@inheritdoc}
</span></span><span> */
</span><span>public function validateForm(array &$form, FormStateInterface $form_state) {
</span>  <span>// Validate email.
</span>  <span>if (!$this->validateEmail($form, $form_state)) {
</span>    <span>$form_state->setErrorByName('email', $this->t('This is not a .com email address.'));
</span>  <span>}
</span><span>}</span>

ここで新しいことをしたのは、関連するキーの一部を使用して#AJAXキーを配列に追加することです。さらに、フォーム要素の後に少しマークアップを追加しました。電子メールの有効性に関する短いメッセージのラッパーとして。

＃ajax配列内のコールバックは、フォームクラス（validateemailajax（））内のメソッドを指しますが、イベントはjQuery変更イベントのこのフォーム要素にJavaScriptバインディングを追加します。または、コールバックの代わりにパスキーを指定することもできますが、この場合、ルートと冗長と思われるコントローラーを設定する必要があることを意味します。そして、私たちは返されたコンテンツでエリアを埋めるつもりはないが、コールバックから生じるアクションを微調整したいので、ラッパーのキーを望んでいません。そのためには、ajaxコマンドを使用します

このすべての詳細については、Ajax APIページまたはAjaxのフォームAPIエントリを参照することをお勧めします。フォーム要素のAJAX動作をさらにカスタマイズするために使用できる他のオプションがいくつかあります。

<span>$form['email'] = array(
</span>  <span>'#type' => 'email',
</span>  <span>'#title' => $this->t('Your .com email address.'),
</span>  <span>'#default_value' => $config->get('demo.email_address'),
</span>  <span>'#ajax' => [
</span>    <span>'callback' => array($this, 'validateEmailAjax'),
</span>    <span>'event' => 'change',
</span>    <span>'progress' => array(
</span>      <span>'type' => 'throbber',
</span>      <span>'message' => t('Verifying email...'),
</span>    <span>),
</span>  <span>],
</span>  <span>'#suffix' => '<span ></span>'
</span><span>);</span>

今度は、フォームクラスの内部にコールバックメソッドを書く時が来ました。これにより、ajaxリクエストをトリガーしたフォームからの引数として$ form配列と$ formstateオブジェクトが受信されます。

この方法では、検証を実行し、検証結果に応じて異なる複数のコマンドでAJAX応答を返します。 CSSCommandを使用すると、いくつかのCSSを電子メールフォーム要素に直接適用しますが、HTMLCommandを使用すると、指定されたセレクターの内容を置き換えます（フォーム要素の接尾辞を覚えていますか？）。

これらのコマンドは、jquery関数にほとんどマッピングされるため、把握しやすいです。このページで利用可能なすべてのコマンドのリストを見つけることができます。また、このメソッド内で3つの新しいクラスを使用しているため、上部に

を使用することも忘れてはなりません。

<span>/**
</span><span> * Validates that the email field is correct.
</span><span> */
</span><span>protected function validateEmail(array &$form, FormStateInterface $form_state) {
</span>  <span>if (substr($form_state->getValue('email'), -4) !== '.com') {
</span>    <span>return FALSE;
</span>  <span>}
</span>  <span>return TRUE;
</span><span>}</span>

そしてそれはほとんどそれです。キャッシュをクリアしてフォームをリロードすると、電子メールフィールドに入力してフォーカスを削除すると、コールバックがトリガーされて電子メールアドレスが検証されます。そこにある小さなスモーのアイコン（定義で変更できます）と定義した短いメッセージにも気付くでしょう。 正しい電子メールアドレスは、緑のフィールドを強調表示し、OKメッセージを印刷する必要がありますが、それどころか、赤は反対のメッセージで使用されます。

フォーム要素定義のラッパーを指定した場合、そのセレクター内に配置されていたコンテンツ（またはレンダリング配列）を返すことができたでしょう。したがって、コンテンツを返すかAjaxコマンドを選択するかを選択するオプションがありますが、より柔軟な（そして一貫した）動作を提供するため、ほとんどの場合に後者をお勧めします。

結論

この記事では、AJAXを使用してフォームを改善し、エンドユーザーにより親しみやすくする例を見てきました。そして、これを達成するためにJavaScriptの正確なゼロ行を書きました。 私たちの場合、それは本当に好みの問題ですまたは

Fancification

です。しかし、これに類似した複数のフィールドで検証がある20のフィールドフォームを扱っている場合、Ajaxを使用することは本当に理にかなっています。入力が無効であることに気付くためだけにフォームを送信する必要がある場合、ユーザーを悩ませることはありません。

フォームは、Drupal 8にAjaxが表示されるメインエリアですが、JavaScriptを作成せずにレバレッジできる他の方法がいくつかあります。

良い方法は、リンクにuse-ajaxクラスを追加することです。これにより、リンクがクリックされるたびに、DrupalがHREF属性のURLにAJAXリクエストを作成します。コールバックから、Ajaxコマンドを返して、必要に応じてさまざまなアクションを実行できます。ただし、JQueryやその他のコアスクリプトは、匿名ユーザーのすべてのページにロードされていないことに注意してください（したがって、Ajaxは通常のリンク動作に優雅に劣化します）。したがって、この動作が必要な場合は、匿名ユーザーにこれらのスクリプトを含めることを確認してください。 Drupal 8フォームでajaxを使用することに関するよくある質問

Drupal 8フォームにAjaxを実装するにはどうすればよいですか？

​​

Drupal 8フォームにAjaxの実装には、いくつかのステップが含まれます。まず、AJAXコールバックを含むフォームを定義する必要があります。これは、フォームのBuildFormメソッドで実行できます。 「#AJAX」プロパティは、AJAXリクエストをトリガーするフォーム要素に追加する必要があります。このプロパティは、「コールバック」キーを含む配列で、フォーム要素がトリガーされたときに呼び出されるメソッドを指定します。コールバックメソッドは、ページで更新するものを定義するAJAX応答オブジェクトを返す必要があります。

Drupal 8のAjaxコールバックコマンドは何ですか？

​​

drupal 8のajaxコールバックコマンドは、Ajaxリクエストが処理されたときにクライアント側で実行されるアクションを指定するために使用されます。これらのコマンドは、CommandInterfaceを実装するPHPクラスです。 Drupal 8には、「アラート」、「挿入」、「削除」、「交換」など、いくつかの組み込みのAJAXコマンドが含まれています。また、CommandInterfaceを実装する新しいクラスを作成することにより、カスタムAJAXコマンドを作成することもできます。 、CommandInterfaceを実装する新しいクラスを作成する必要があります。このクラスは、次のキーを持つ配列を返すレンダリングメソッドを定義する必要があります。これは、コマンドの名前である「コマンド」と、クライアント側で呼び出される方法である「メソッド」です。アレイには、クライアント側のメソッドに渡される追加データも含めることができます。フォーム要素の「#AJAX」プロパティで「エラー」キーを使用します。このキーは、AJAX要求中にエラーが発生した場合に呼び出されるコールバックメソッドを指定します。コールバックメソッドは、エラーを処理する方法を定義するAJAX応答オブジェクトを返す必要があります。

ajaxを使用してDrupal 8？

を使用してAjaxを使用して更新するにはどうすればよいですかDrupal 8のページの複数の要素では、AJAX応答オブジェクトの複数のコマンドを返すことができます。各コマンドは、更新する要素と実行するアクションを指定する必要があります。コマンドは、応答オブジェクトに追加された順序で実行されます。 Drupal 8のページの要素では、「交換」コマンドを使用できます。このコマンドには、交換する要素のセレクターと新しいコンテンツの2つの引数が必要です。セレクターは任意の有効なjQueryセレクターにすることができます。

Ajaxを使用してDrupal 8のページから要素を削除するにはどうすればよいですか？ 、「削除」コマンドを使用できます。このコマンドには、1つの引数が必要です。要素のセレクターを削除します。セレクターは任意の有効なjQueryセレクターにすることができます。

ajaxを使用してDrupal 8のページにコンテンツを挿入するにはどうすればよいですか？ 「挿入」コマンドを使用できます。このコマンドには、コンテンツが挿入される要素のセレクターと新しいコンテンツの2つの引数が必要です。コンテンツは、選択した要素の前、後、後、または内部に挿入できます。

ajaxを使用してDrupal 8にアラートメッセージを表示するにはどうすればよいですか？

ajaxを使用してDrupal 8にアラートメッセージを表示するには、「アラート」コマンドを使用できます。このコマンドには、1つの引数が必要です。表示するメッセージ。メッセージは任意の有効な文字列にすることができます。

Ajaxを使用してDrupal 8の別のページにリダイレクトするにはどうすればよいですか？ 「リダイレクト」コマンドを使用します。このコマンドには、1つの引数が必要です。ページのURLをリダイレクトします。 URLは、任意の有効なURLにすることができます。

以上がDrupal 8でAjaxフォームを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。