1

I'm building a custom checkout, that uses steps, like those used on Apple.

http://www.formisimo.com/blog/wp-content/uploads/2013/09/Apple-stage-one.jpg

When an input field is marked as invalid, I would like the affected sections to expand again. I can't seem to get the function running on click though.

The test code is very basic. Any why this would not be working? It does work if I change the .click to use the body element, for example.

jQuery('#place_order').click(function(){

  if(jQuery('p#billing_last_name_field').hasClass('woocommerce-invalid')) {
    alert('INVALID');
  } else {
    alert('VALID');
  }

});
2
  • the trigger ('#place_order').click is too soon, the validation is made later. try the trigger $(document.body).on("update_checkout", ...
    – mmm
    Sep 5, 2015 at 18:42
  • generic JS, WooCommerce and other 3rd party plugin/theme dev support is off topic and not in this stacks scope. You should ask via their official support routes or in their groups and communities.
    – Tom J Nowell
    Oct 18, 2021 at 22:44

1 Answer 1

3

As it was already noted by @mmm, your click event is placed too soon. Try with a submit trigger, as suggested in a similar StackOverflow answer:

jQuery(document).ready(function($) {
    jQuery("form.woocommerce-checkout").on('submit', function() {
        ... your code here ...
    });
});
1
  • 1
    this gets the submit, but does not enable me to submit the real submit later on is this possible? I'd like to show a popup, and on completion I'd like to call the default woocommerce submit
    – user54098
    Mar 31, 2021 at 11:40

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