Problem making text field required

chloepasour
Tourist
6 0 1

Hi, I have added some custom code to my product page and I am trying to make it required, so the customer can’t add to cart until something is in the text field. I am using the Dawn theme and this is the code I’m using:

<p class="line-item-property__field">
<label for="initial">initial</label><br>
<input required class="required" id="initial" type="text" name="properties[initial]">
</p>

Replies 5 (5)

ThomasBorowski
Shopify Expert
803 71 239

Adding the required attribute alone will not work since the form is set to not validate. You can enable form validation like this:

 

Go to the code editor and open the file sections/main-product.liquid. Look for code around line 289 that looks like this:

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

 

Remove the novalidate part so that that line looks like this:

{%- form 'product', product, id: product_form_id, class: 'form', data-type: 'add-to-cart-form' -%}

 

Now the required attribute on the line item property field should work and customers should get an error message from the browser if they try to add the product to the cart without filling in that field.

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
chloepasour
Tourist
6 0 1

Worked like a charm- thank you so much!!!

greenchair
Visitor
2 0 0

Hi! I have the same issue, but I'm using the dawn theme. I've added a custom field on the product page, using custom liquid code, but cannot find similar code in the sections/main-product.liquid area but cannot find the novalidate code to remove it. Any help? Thanks!

jtechnoir
Shopify Partner
2 0 1

This code has moved to snippets/buy-buttons.liquid

naeem30
Visitor
1 0 0

Cheers mate, this helped a lot.