How can I run client side validation before a Drupal AJAX submit call?

Question

I'm trying to perform client side validation using jquery.validate.js on a form submitted via Ajax (using form actions), but for some reason, the client side validation is not being triggered.

This is what I have in my template.php file in order to trigger an ajax call for login:

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

And here's my js to trigger the client side validation:

(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);

The beforeSubmit method is being triggered because when I print to the console, I do get a value.

On a sidenote, I've tried doing this using the beforeSend instead. The client side validation does trigger, but the submit is not being halted.

Any pointers please?

Answer 1

I would attempt to hijack the submit form by changing the event type and triggering the submission yourself.

For example:

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

Then just add your own click or form handler. Once you happy with the validation simply trigger the event "submitmyform". For example:

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');
      }
    });
  }
}

I have not tested this code but in essence this is how I recommend you approach it rather than messing around with the ajax object itself.

Answer 2

This is stupid but it works, just add 'event=>'onsubmit'. It will fix a problem with the jQuery event priority in drupal code.

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