web-dev-qa-db-ja.com

Drupal AJAX submit呼び出しの前にクライアント側の検証を実行するにはどうすればよいですか？

（フォームアクションを使用して）Ajax経由で送信されたフォームでjquery.validate.jsを使用してクライアント側検証を実行しようとしていますが、何らかの理由でクライアント側検証がトリガーされていません。

これは、ログインのためのajax呼び出しをトリガーするために、template.phpファイルにあるものです。

$form['actions']['submit']['#ajax'] = array(
    'callback' => 'fantasia_user_login_ajax_callback',
'wrapper' => 'user-login-form',
    'event' => 'mousedown',
 );

そして、クライアント側の検証をトリガーする私のjsは次のとおりです。

(function ($) {
Drupal.loginAjax = {
    form_id: 'user-login-form'
};  
Drupal.behaviors.loginAjax = { 
    attach: function (context ,settings) {      
         Drupal.loginAjax.beforeSubmit = function (form_values, form, options) {
                $("form#user-login-form", context).validate({ 
                    rules: {
                        edit_pass: "required",
                        edit_name: "required"                     
                    },               
                    messages: { 
                        edit_name: { 
                            required: "E-mail Address is required"
                        }
                    }
                });                  
        }

        for (ajax_el in settings.ajax) {
            if (Drupal.ajax[ajax_el].element.form) {
                if (Drupal.ajax[ajax_el].element.form.id == Drupal.loginAjax.form_id) {                     
                    Drupal.ajax[ajax_el].beforeSubmit = Drupal.loginAjax.beforeSubmit;
                }
            }
        }

    }
};
})(jQuery);

コンソールに出力すると値が取得されるため、beforeSubmitメソッドがトリガーされています。

余談ですが、代わりにbeforeSendを使用してこれを試みました。クライアント側の検証はトリガーされますが、送信は停止されていません。

ポインタはありますか？

7ajaxjavascript
2
Joe Micallef

イベントタイプを変更し、自分で送信をトリガーすることで、送信フォームをハイジャックしようとします。

例えば：

$form['actions']['submit']['#ajax'] = array(
    'callback' => 'fantasia_user_login_ajax_callback',
'wrapper' => 'user-login-form',
    'event' => 'submitmyform',
 );

次に、独自のクリックまたはフォームハンドラーを追加します。検証に満足したら、イベント「submitmyform」をトリガーするだけです。例えば：

Drupal.behaviors.loginAjax = { 
  attach: function (context ,settings) { 
    // Cache the form object
    var $form = $("form#user-login-form", context);
    var $submitButton = $('input[type="submit"]', $form);

    // Use once so we dont attach submit multiple times
    // Use off to remove any existing submit handler
    $form
      .once('loginAjax')
      .off('submit')
      .on('submit', function(e){
      e.preventDefault();
      var $form = $(this);

      // Run validation on $form object.

      // If success, trigger event on button
      if(valid) {
        $submitButton.trigger('submitmyform');
      }
    });
  }
}

私はこのコードをテストしていませんが、本質的に、これはajaxオブジェクト自体をいじるのではなく、この方法に近づくことをお勧めします。

4
JNP Web Developer

これは愚かですが、動作します。'event=>'onsubmit'を追加するだけです。 drupalコード内のjQueryイベント優先度の問題を修正します。

$form['actions']['submit']['#ajax'] = array(
    'callback' => 'fantasia_user_login_ajax_callback',
    'wrapper' => 'user-login-form',
    'event' => 'onsubmit',
 );
1
Lordgretix