Problem making text field required

chloepasour
New Member
6 0 0

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 3 (3)
hawkscode
Shopify Partner
74 15 13

Hi @chloepasour 

 

i can fix it .. please hire me 



If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
- Feel free to contact me on vikash.hawkscode@gmail.com regarding any help
- Skype : vikas.hawkscode
ThomasBorowski
Shopify Expert
648 43 147

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.

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
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★
chloepasour
New Member
6 0 0

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