[Help needed] Validation function for add to cart form submission

Highlighted
Shopify Partner
6 0 3

Hi,

We've added some custom fields into the add to cart form and are trying to add some validation. We've written our custom validation function and are trying to bind it using the following code placed which we placed in theme.liquid within the body tag:

jQuery(function($) {
  $('#AddToCartForm').submit(function() {
      console.log("Validation called");
      return false;
  });
});

We've modified the form add to cart form to have the AddToCartForm id. However, this function is never called. Logging the just $('#AddToCartForm') shows that the selector is working correctly. We also tried moving it to the product liquid page to be just under the form close tag, but that didn't change anything. We've also tried binding onto the submit button itself then using

e.preventDefault();
e.stopPropagation();

to stop the form from submitting, but this also does not work. However, it does bind and the function is called properly, it just doesn't stop the submission. We've been trying all day to fix this, and are completely out of ideas, any help is much appreciated. 

Thank you!

EDIT:

We also actually also tried using onSubmit, so the code was:

<form onSubmit='return test()'>

The js was:

function test() {
  console.log("Validation called");
  return false;
}

this function was also never called.

0 Likes
Highlighted
New Member
10 0 0

Bump...

Did you figure this out yet?

0 Likes
Highlighted
Shopify Partner
6 0 3

Nope, but we did manage to pin down the root cause of the issue. This issue is because of the fact that some themes have their own submission function bound to form submit, so when our validation function is called and fails, the themes form submit function passes and just continues. Essentially, you would need to hunt down the listeners added by the theme and modify them to run your own validation function first (google chrome network monitor + element inspector makes hunting them down really easy). Some themes will work out of the box for this, whereas others will not.

The default theme that the shop is loaded with requires you to hunt down their on submit function and modify it, whereas Brooklyn (another free shopify theme) does not. With brooklyn our validation function works almost as needed (included below), it still has the issue where someone can go $('#AddToCartForm').submit() and bypass the validation. 

<script>
jQuery("form[action='/cart/add'] [type=submit]").on("click", function(e) {
   // Validations here
   if (valid) {
      return true;
   } else {
      return false;
   }
});
</script>

Returning false does stop the form fom being submitted, however as I mentioned above $('#AddToCartForm').submit() will still let the form be submitted.

0 Likes
Highlighted
New Member
10 0 0

So you still can't use an onsubmit event for the brooklyn theme, rather than an onclick event?

0 Likes
Highlighted
Shopify Partner
9 0 1

Looking for something that works as well.

0 Likes
Highlighted
New Member
2 0 0

I ran into this issue as well. - Default submit event listeners superseding the custom script action.

A solution that worked for me, and can hopefully help others, is to run delegated event handlers higher up the DOM  and survive whatever other handler chaos the theme throws at you.

 

change your event handlers to

 

$('body').on( "submit", ".class_name", function(e) {

e.preventDefault();

//  Your function does the businezzz, validation, popup, add_to_cart.. whatever, etc etc.

}

 

Hope this helps: 2020 - Covid-timez

 

0 Likes