2

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?

1
  • Update: returning false in the beforeSubmit method does in fact stop the AJAX call but on clicking the Submit button again, the method is not being triggered at all Aug 16, 2013 at 10:10

2 Answers 2

4

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.

1
  • 1
    This worked .. Instead of using form submit func as used here I have used form submit click button event, did the validation there and then called the final custom callback event .. thanks
    – mjs
    Oct 14, 2014 at 6:45
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.