Required Line item not working

Highlighted
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
Highlighted
Shopify Expert
9884 100 1724

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
Highlighted
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
Highlighted
Tourist
3 0 3

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

3 Likes
Tourist
5 0 1

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

1 Like
Highlighted
New Member
2 0 1

worked perfectly. Thanks 


@Peter_J_Chicari 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


 

1 Like
Highlighted
Tourist
3 0 3

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

0 Likes
Highlighted
New Member
1 0 0

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

0 Likes