AJAXを使用してフォームを検証および送信する方法


12

Form APIを使用してWebフォームを作成しました。#AJAX各フィールドにAJAX検証を追加するためにフィールドオプションを使用しています。

ページをリロードせずにAJAXを使用してフォームを検証および送信することは可能ですか?検証が失敗した場合はエラーメッセージを表示し、検証が成功した場合はメッセージ(理想的にはライトボックス内)を表示してフォームフィールドをリセットします。

これまでの私のコード:

$form['name'] = array(
    '#type' => 'textfield',
    '#title' => t('Name'),
    '#default_value' => '',
    '#maxlength' => '128',
    '#required' => TRUE,
    '#ajax' => array(
        'callback' => '_validate_name',
        'wrapper' => 'name-error-icon-container',
        'method' => 'html',
        'effect' => 'none',
        'progress' => array(
            'message' => NULL,
        ),
    ),
);

$form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Submit',
    '#ajax' => array(
        'callback' => '_handle_form_submit',
        'effect' => 'fade',
    ),
);

コールバック関数は次のようになります。

function _validate_name($form, $form_state) {

    if ($form_state['values']['name'] != '') {
    $output = 'OK';
    }
    else {
      $output = 'Enter a value';
    }

   return $output;

}

function _handle_form_submit($form, $form_state) {
}

しかし_handle_form_submit、検証してからメッセージを返すか、フォームを送信してフィールドをリセットするために関数に何を入れるべきかわかりませんか?

回答:


-2

例のモジュールは、あなたが他の多くと同様に参照できるというAJAXフォームを持っています。ここにコードリポジトリのajaxフォームの例へのリンクがありますが、とにかく自分で実装を確認するためにダウンロードすることをお勧めします。


1
申し訳ありません-私は、例のモジュールではajaxy検査の実施のいずれかの例を見つけるカント
ErichBSchulz

ええ、それはまさに膨らんだ答えです。実際には検証もありません。各コールバックは単にフォームを返します。
AlxVallejo 2014年

2
これはどのように受け入れられた答えですか?提供されたリンクのどこを見ればよいのかさえ書かれていません(そしてリンクにはとにかく検証の例がありません)。
robinmitra 2016年

AJAXフォーム例えば新しいリンク:cgit.drupalcode.org/examples/tree/ajax_example/...
Brentg

受け入れられたが品質が悪いため、私はwikiを回答に使用しました
rocketeerbkw 2017年

11

これは数年前から問題になっていることを知っていますが、他の回答がDrupal 7のajaxフォーム送信のポイントを実際に理解しているとは思わないので、説明しようと思います。

良い習慣に従って、フォームがajaxなしでも機能することを確認してください。ajax送信ハンドラはフォームを返すだけです。それ以外はすべて、検証と送信関数に含める必要があります。

function ex_form($form, $form_state) {
  $form['name'] = array(
    '#type' => 'textfield',
     '#title' => t('Name'),
     '#default_value' => '',
     '#maxlength' => '128',
     '#required' => TRUE,
  );

  $form['submit'] = array(
   '#type' => 'submit',
   '#value' => 'Submit',
   '#ajax' => array(
     'callback' => 'ex_form_ajax_handler',
     'effect' => 'fade',
   ),
  );
}

function ex_form_submit(&$form, &$form_state) {
  // Submit logic - runs when validation is ok
  // You can alter the form here to be just a markup field if you want.
}

function ex_form_validate(&$form, &$form_state) {
  // Validation logic - invalidate using form_set_error() or form_error()
}

function ex_form_ajax_handler(&$form, &$form_state) {
  return $form;
}

おそらくベストアンサー
アンドリューコゾリス

validateおよびsubmitメソッドは、送信ボタンのAJAXコールバックに対して自動的に呼び出されると言っていますか?メソッドはどの順序で呼び出されますか?
ジェフ

3

2011年10月17日のmaxtorete投稿は、両方form_validate()form_submit()

(まだテストしていません。)

また、スタックオーバーフローでのJoshua Stewardsonの回答には、優れた実用例があります。

function dr_search_test_form($form, &$fstate) {

  $form['wrapper'] = [
    '#markup' => '<div id="test-ajax"></div>',
  ];

  $form['name'] = [
    '#type'     => 'textfield',
    '#required' => TRUE,
    '#title'    => 'Name',
  ];

  $form['submit'] = [
    '#type'  => 'submit',
    '#value' => 'Send',
    '#ajax'  => [
      'callback' => 'dr_search_test_form_callback',
      'wrapper'  => 'test-ajax',
      'effect'   => 'fade',
    ],
  ];

  return $form;
}

function dr_search_test_form_callback($form, &$fstate) {

  return '<div id="test-ajax">Wrapper Div</div>';
}

function dr_search_test_form_validate($form, &$fstate) {

  form_set_error('name', 'Some error to display.');
}

Joshuaは、検証エラーメッセージが#ajax['wrapper']要素を完全に置き換えるため、コールバックでは、この要素を置き換えるときにこの要素を再度供給する必要があると述べています。


そのリンクが無効になっている場合、それはその質問がもはや関係がないことを示しています!
ErichBSchulz 2013年

2
反対票は少し厳しいです-たとえそれがリンクだけだったとしても-それは答えへのリンクでした-答えを持たないモジュールへのリンクではなく-受け入れられた答えとは異なります!! とにかく、私が反対票を投じられている間に私はいくつかの作業コードを提供しました。
ErichBSchulz 2013年

おかげで@ mbomb007-今すぐ修正
ErichBSchulz

2

一般に、検証とフォーム送信の処理は、通常の_validate()および_submit()コールバックで行われる必要があります。つまり、フォームはajaxがなくても機能するはずです。

#ajaxコールバックが行うべきほとんど唯一のことは、定義されたラッパーに従って、置き換えられるフォームの一部を返すことです。


2
言い回しに注意してください。コールバックは、form_stateから再構築されたTHE WHOLE FORMを返す必要があります。フォームの一部を返すことは、Drupal / AHAHの最大の誤解です。katbailey.net/blog/ahah-drupal-may-it-one-day-live-its-acronymを参照してください。

7
この質問はDrupal 7についてです... AHAHはDrupalには存在しません。#ajaxDrupal 7でのコールバック関数あなただけ交換したいというフォームの一部を返します。
クライブ

1
@ChrisD。Cliveが述べたように、これはDrupal 7であり、複数の個別のフォームパーツを返すなど、あらゆる種類の豪華なことを実行できる、非常に優れたajaxフレームワークがあります。
Berdir

@Clive私は別のajax関連の問題drupal.stackexchange.com/a/142316/19205に出くわしましたが、作者は「items_countが変更された後にフォームを再度ビルドする必要がある」と述べましたが、これはd7にも当てはまります。私は混乱しています、どちらの文が正しいのですか(誰が正しいのかについて議論することなく:-))。これについていくつかの情報を共有していただけませんか?
キランキング

0

2つの方法があります

1)

function abc_form_validate(&$form, &$form_state) {
  // Validation logic - invalidate using form_set_error() or form_error()
}

function abc_form_ajax_handler(&$form, &$form_state) {
  return $form;
}

2)サンプルモジュール http://cgit.drupalcode.org/examples/tree/ajax_example/ajax_example.module?id=refs/heads;id2=7.x-1.x#l402


私は今あなたの答えがどれほど正確であるかはわかりませんが、それのフォーマットは間違いなく改善が必要です(モデレーターによって削除されたくない場合)。必要に応じてヘルプページを確認するか、wysiwygエディターボタンのいくつかを使用して、少なくともコードを...コードとしてマークしてください。
Pierre.Vriens 2015

正しくフォーマットされていないコードは、回答を削除する理由にはなりません。修正するには、編集権限を持つユーザーが必要です。
kiamlaluno

ここで私は必死になって解決策を探していますが、この回答からわずか2年後に、リンクをクリックして、存在しないツリー/ブランチに移動しました。回答のリンクや、執筆時にコンテンツを貼り付ける場合は、リンクを使用しないでください。
MacK 2017

0

私の場合は、使用してsubmit私はそれを変更してタイプすると、フォームが常に提出させbutton#ajax指定されました。次に、ajaxコールバックで検証を行う必要がありました。

私はctoolsペインを作成していました。それがそれに影響を与えるかどうか私は知りません。

function mymodule_form($form, &$form_state) {
  ...
  $form['button'] = array(
    '#type' => 'button',
    '#value' => t('Subscribe'),
    '#ajax' => array(
      'callback' => '_mymodule_ajax',
    ),
  );
  return $form;
}

function _mymodule_ajax($form, &$form_state) {
  if ( ! valid_email_address($form_state['values']['email']) ) {
    form_set_error($form, t('Please enter a valid email address.'));
  } else {
    $form = array(
      '#markup' => t('You have subscribed.'),
    );
  }
  return $form;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.