Intercepting onSubmit; adding additional validation in checkout before completing order

Tourist
8 0 1

I am currently trying to edit the checkout.liquid on a Shopify Plus store. Shopify plus allows modification of checkout.liquid.

I inteted to validate that an additional checkbox I am inserting into the checkout.liquid is checked before the order is finalized; this is at the payment step of checkout.

I have written the following in between a set of  script tags of checkout.liquid; I will move this to a .js file later, but while I develop this its in script tags and I don't think it should make a difference functionally.
 

  $(document).ready(function() { 
    $("form.edit_checkout:has(button[data-trekkie-id='complete_order_button'])").submit(function(e){
      e.preventDefault();
      console.log("??" + e.isDefaultPrevented());
      console.log("form submitted");
      return false;
    }); 
  });

I see my console message "true" and "form submitted" printed in my browsers console, but the form still seems to submit and the page is reloaded. I thought the e.preventDefault() or return false would stop the form submitting/pageloading.

Does anyone know why this is not working? or how I can do client side validation? 
I plan to eventually use the script editor to valdiate this, however ever it would be nice to do this client side first.
 

0 Likes
Tourist
9 0 1

Did you solve it?

I have exactly the same problem.

0 Likes
Shopify Partner
6 0 0

Looking for something that works as well.

0 Likes