Required Line item not working

[Kristin_W]

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>

[Jason]

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.

[Kristin_W]

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"

[Peter_J_Chicari]

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