How can I make a text field mandatory before adding to cart?

[chloepasour]

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>

[ThomasBorowski]

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.

[chloepasour]

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

[greenchair]

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]

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

[naeem30]

Cheers mate, this helped a lot.

[MetalMac]

has this moved again?

[ACD1]

No. Still in same place as last mentioned. Works like a charm