Required Line item not working

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
Shopify Expert
9778 86 1526

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
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"

1 Like
New Member
2 0 0

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

0 Likes