Required Line item not working

Kristin_W
New Member
3 0 1

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>

 

0 Likes
Jason
Shopify Expert
10041 119 1877

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:

  1. Not use the ajax feature. Some themes let you turn it off
  2. Adjust the site JavaScript so that it stops the form from being sent when the field is empty (and ideally showing a message or error)

[edits] Typos.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Kristin_W
New Member
3 0 1

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"

peterchic
Excursionist
13 0 12

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

vladalex40
Tourist
5 0 1

Omg thanks a lot! I had the same problem and this finally works! I can't thank you enough!

uceckpa
New Member
2 0 1

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


 

peterchic
Excursionist
13 0 12

I know the feeling! Glad it worked out for you.

0 Likes
kiwiandfriends
New Member
1 0 1

Thank you SO much for posting this, it worked for me! Had been looking for a solution for hours!

peterchic
Excursionist
13 0 12

Glad I helped!

0 Likes
BekiGems
Tourist
8 0 1

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?