jQuery - fire event only if form is valid - Wordpress - Contact Form 7

Question

Using the Contact Form 7 plugin on a Wordpress project.

Contact Form 7 does validation checks when the form is submitted. If any validation rules are not met, it adds a class 'wpcf7-form invalid' to the form element.

When the form's submit button is clicked, I want to do cool jquery stuff, but only if the form is valid.

I'd like to do something like this:

$('input#my-submit').click(function(event){    
   if ( !$(this).parent('form#myForm').hasClass('wpcf7-form invalid') ) {
       // do cool jquery stuff
   }
});

but of course, the // do cool stuff is firing even if the form has the 'invalid' class, because it's firing before the class has a chance to change.

Can I use the code above but delay the firing of the if statement, so Contact Form 7's validation rules can complete before my jQuery checks .hasClass('wpcf7-form invalid') ?

Thanks!

Answer 1

Contact form 7 has a hook that you can add in the 'additional settings' box located at the bottom of the edit screen.

add this to the 'additional settings'

on_sent_ok: "// do cool jquery stuff;"

this question also answers it