Debut theme - having line item properties be required fields

Store Design
1

Hi everyone,

Thanks to this excellent tutorial, I was able to add additional fields to a product and gather custom information. However, the fields are marked as required in the tag but that requirement is being ignored when you click Add to Cart or Buy It Now. I believe this is because of the way the Add to cart and Checkout buttons function in Debut (e.g. it’s not just a regular form submit),

I suspect one solution would be to add JavaScript that will prevent the Add to cart and Checkout buttons from firing until the required line item property fields have been satisfied. Or, perhaps it’s easier than this.

Here’s a development site link to an item with line item properties (all fields marked required):

https://michigan-navhda.myshopify.com/products/membership-form

Any help is greatly appreciated.

Thank you!

Full disclosure, I’ve created a separate post asking for help with this theme on a different topic.

2

I think you can delete you form attribute ‘novalidate’ and it will work.

3

Thank you @ChoosiZon . Removing that markup does indeed solve the problem (duh… seems obvious now!).

I wonder why Shopify choose to disable native validation on the form. I guess they are doing JS validation and don’t feel it’s necessary. Still, I can’t help but wonder if I’m creating some competition between native validation and the form validation built into the code. I just test it as thoroughly as possible.

Very much appreciate your help.