I'm following this tutorial: https://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/get-cus...
I'm trying to add a required line item (monogram field in this case). I've added the <input required> element, but the monogram input doesn't seem to validate (I can add the item to cart without entering anything in this field). Does anyone know what I'm doing wrong?
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<select name="id" id="productSelect" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
<div>
<label for="monogram">Monogram</label>
<input required type="text" id="monogram" name="properties[Monogram]">
</div>
<div class="product-single__quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %}">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
</div>
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
</form>
Hey Kristin,
I took a quick look at the theme you're using. It's currently set up to use AJAX to add to cart, so it submits the form without changing pages. When a form is submitted this way the HTML5 required attribute that would be handled by the browser is ignored. You'd need to either:
[edits] Typos.
Thanks Jason.
I was able to fix this by disabling AJAX as you mentioned.
For anyone who finds this thread, this is what I did:
Customize Theme > Cart Page > uncheck "Stay on the currrent page when an item is added to the cart"
Unchecking that did not work for me. In case that's the same for anyone else, I found this other option that did work on another Shopify forum thread...
Figured it out ...
Edit your product-customizable-template.liquid file (around line 143)
Change from this…. {% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
To this… {% form 'product', product, class:form_classes:%}
Need to remove “nonvalidate” in order to be a required field
worked perfectly. Thanks
@peterchic wrote:Unchecking that did not work for me. In case that's the same for anyone else, I found this other option that did work on another Shopify forum thread...
Figured it out ...
Edit your product-customizable-template.liquid file (around line 143)
Change from this…. {% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
To this… {% form 'product', product, class:form_classes:%}
Need to remove “nonvalidate” in order to be a required field
Thank you SO much for posting this, it worked for me! Had been looking for a solution for hours!
This worked thank you so much!
however does anyone know how to just require field for one text box and not all of them? I did this step and it work but it says all boxes required to be filled out but it’s just 1 of them I need the others are optional?
User | Count |
---|---|
395 | |
202 | |
146 | |
42 | |
40 |