Usage with a views filter form [#1848932]

I'm trying to use clientside_validation for a custom exposed views filter form. All works fine if there is no AJAX or autosubmit involved. The problem is that for my form, both is. I guess that submitting is handled via the submit button's click event. Now is there a way to start validating a form from the outside, e.g. with a click handler of a button? I think this could work in my case, but I don't know how to do this.

Comments

Comment #1

attiks CreditAttribution: attiks commented 23 November 2012 at 21:33

Related to #1730952: Validate ajax submits clientside before doing ajax request it should work with Ajax, if the auto submit invokes click on the button it should work as well, but no idea how the auto submit is done. Is this part of views or a custom module/code?

Comment #2

Ronino CreditAttribution: Ronino commented 24 November 2012 at 15:03

Thank you for your fast reply.

Related to #1730952: Validate ajax submits clientside before doing ajax request it should work with Ajax, if the auto submit invokes click on the button it should work as well,

I tried that without any success.

but no idea how the auto submit is done. Is this part of views or a custom module/code?

The autosubmit functionality is part of ctools (ctools/js/auto-submit.js) and used by views. It looks like there is no submit event involved that's why I would like to start validating when the submit button gets clicked.

How to start validation from the outside (something like $('#some-form').validate())? I found validate() somewhere in clientside_validation.js, but passes validate_options which I don't have access to. In #1486480: Clientside Validation while using an ajax callback you suggest using form.validate. Could you be more specific?

How to know if there are errors (something like $('#form').hasErrors()) to prevent the click event from being processed?

Thank you in advance.

Comment #3

attiks CreditAttribution: attiks commented 26 November 2012 at 15:26

Calling $('#some-form').valid() should trigger the validation, the easiest is to bind it to the click event of the button (using custom javascript code)

http://docs.jquery.com/Plugins/Validation/Validator/numberOfInvalids gices you the number of errors

Comment #4

Ronino CreditAttribution: Ronino commented 13 December 2012 at 17:33

Status:

Active

» Fixed

attiks, you are my hero. It works for me with this code:

// Install a click handler on the form to validate the input before
// submitting. We use the click event instead of submit as Views uses it.
var $form = $('#some-form');
var $submit = $form.find('input[type=submit]');
$submit.click(function(e) {
  // Validate the form, validate() is called automatically.
  var valid = $form.valid();

  // Prevent any subsequent click event handlers from being executed if the
  // form is invalid.
  if (!valid) {
    e.stopImmediatePropagation();
  }

  return valid;
});

// Place the click handler declared before at the first position in the 
// click event handler queue. This is needed to execute it before all others
// to stop further processing of the click event if the form validation
// fails.
var clickHandlers = $submit.data('events')['click'];
var clickHandler = clickHandlers.pop();
clickHandlers.splice(0, 0, clickHandler);

Thank you!