Validate ajax submits clientside before doing ajax request

(Slightly altered) patch committed to 7.x-dev (02497c5)

I get this in the firebug console:

TypeError: Drupal.ajax[ajax_el] is undefined
[Break On This Error] 	

if (Drupal.ajax[ajax_el].validate_first) {

I was trying to apply client side validation to a form being loaded through colorbox node, it is the forward module's form...
Thanks,
Da.

I got a similar error in chrome
Uncaught TypeError: Cannot read property 'validate_first' of undefined

Thanks for the report, fixed in latest dev.

Sorry to reopen this issue, I've added:

'validate_first' => TRUE,

When I load the page and submit the form the validation pops up fine. However but after the validation has run the form submit button no longer works.

When I changed the code in the module to the code that was submitted by Davidovich the form then worked fine even after validation.

Has anyone else encountered this same issue?

Related issue #1848932: Usage with a views filter form

I am currently running 7.x-1.36 and I have the same issue as Saaj in comment #7.

I enable clientside validation on a field in a form that I defined in my module. The submit button is using Ajax and I added the 'validate_first' =>TRUE line to the #ajax array on that form submit button.

The validation works the first time I press the button, then the submit button seems to lose it's ability to function. I can make the field value correct so it should pass validation but I click submit and no action seems to take place.

If I leave the field value valid from the beginning the form submits and the ajax loads properly, but then the submit button also stop working from then on.

If I disable the clientside validation on this form, everything works fine. I can submit the form multiple times over and over. As soon as I turn it on, the button only functions for one click.

Try to manually insert the patch, add -

      for (ajax_el in Drupal.settings.ajax) {
        if (Drupal.ajax[ajax_el].validate_first) {
          Drupal.ajax[ajax_el].options.beforeSubmit = function (form_values, element, options) {
            return Drupal.myClientsideValidation.validators[element.attr('id')].form();
          }
        }

inside the for (var ajax_el in Drupal.settings.ajax) { } function in clientside.validation.js... it should be in line 47... that's what i did and it works great on multiple submits...

Works for me after changing:

if (typeof Drupal.ajax[ajax_el] !== 'undefined' && Drupal.ajax[ajax_el].validate_first) {

to:

if (typeof Drupal.ajax[ajax_el] !== 'undefined' || Drupal.ajax[ajax_el].validate_first) {

fixed in latest dev version

Tested as follows:

1. Download the Examples module
2. Enable the ajax_example module
3. Create a custom module with following code (I named the module custom)
   

     function custom_form_alter(&$form, $form_state, $form_id) {
       if ($form_id == 'ajax_example_wizard') {
         $form['next']['#ajax']['validate_first'] = TRUE;
       }
     }
     

4. Enable the custom module
5. Go to examples/ajax_example/wizard
6. Click through the form and everything should work as expected

I have an error when on a page more than one ajax submit buttons.
I created patch. It's work for me.
Please review.

+++ b/clientside_validation.jsundefined
@@ -46,8 +46,9 @@
+          var ajax_elem = ajax_el;

what difference does this make, you store ajax_el in ajax_elem, or am I missing something?

what difference does this make, you store ajax_el in ajax_elem, or am I missing something?

Yes, I store ajax_el in ajax_elem but only after
if (typeof Drupal.ajax[ajax_el] !== 'undefined' && Drupal.ajax[ajax_el].validate_first)
this line.

So, when submit button is pressed only right ajax element is taken and not the last one.

thanks, I knew I missed something

Modified this patch to work with version 1.39.

Here is a working patch.

#3 Works OK

if (Drupal.ajax[ajax_el].validate_first)

I've ended up using custom js code. I'm loading an form edit in modal. To prevent ajax submit you can use this js snippet:

        $('.modal form').on('form-pre-serialize', function(event, form, options, veto){
            $(form).validate();
            if(!$(form).valid())
            {
                veto.veto = true;
            }
        })