Custom product 'required' field not working

[fixyoursignin]

I'm trying to add custom fields to a product form and following the instructions in the docs, I added 'required' as a tag inside the selector and also added 'required' to the class list. But it's still allowing me to add the product to the cart with the field empty.

[ThomasBorowski]

You would have to post the relevant code here so we can see what might be going wrong.

Generally, you would add (to get the terms straight) a required attribute to the field's tag, e. g.

<input type="text" name="properties[whatever]" required />

If a user left that field empty it would trigger the browser's default HTML5 form validation. See https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#The_required_attribute for details.

[fixyoursignin]

One example:

  <select required class="required single-option-selector single-option-selector-product-template product-form__input"
          id="covermaterial" name="properties[designer_bgtexture]" onChange="markMaterialSwatch();" data-error="Please select a Cover Material." >
    <option value="">-- Please Select --</option>
  {% for mat in materials %}
    {% for color in materialfamilies[mat] %}
      {% assign swatchName = mat | append: "-" | append: color %}
    <option value={{ swatchName }}>{{ swatchName }}</option>
    {% endfor %}
  {% endfor %}
  </select>

Another example, first line is required, second is not.

<div class="input-wrapper product-form__item" style="min-width: 100%">
  <label for="embossline1" style="font-weight: 700;">Line 1 <span style="color: Red;"> *</span></label>

  <input required class="required product-form__input" type="text" maxlength="40" id="embossline2" name="properties[designer_line2text]" />
</div>

<div class="input-wrapper product-form__item" style="min-width: 100%">
  <label for="embossline2" style="font-weight: 700;">Line 2 <em>(optional)</em></label>

  <input class="product-form__input" type="text" maxlength="40" id="embossline2" name="properties[designer_line2text]" />
</div>

[fixyoursignin]

The point is, these are multiple fields in multiple forms and NONE of them are working with 'required'

[ThomasBorowski]

Can you post a link to the live store?

[itswildcharm]

I need help with this same issue.

www.shopwildcharm.com

[dtrent2]

I have this same issue as well. Here's the code I am using. 

Customers can add to cart without having to fill out the text box. 

[GfA]

I was having the same problem, but found this article:

https://community.shopify.com/c/Shopify-Design/Required-Line-item-not-working/td-p/263177

My form is handled by AJAX, so the HTML required is ignored by the browser.

Interestingly, <select> required attribute works normally.

[hacy]

I'm also having the same issue:

        
            <p class="line-item-property__field">
              <label for="registrant-name">Registrant Name</label>
              <input required class="required" id="registrant-name" type="text" name="properties[Registrant Name]">
            </p>
 
            <p class="line-item-property__field">
              <label for="hometown-or-zip-code">Hometown or Zip Code</label>
              <input required class="required" id="hometown-or-zip-code" type="text" name="properties[Hometown or Zip Code]">
            </p>
        

[ank_mak]

Hello 
I have faced the same issue for the product required line item properties.
I have removed "novalidate" attribute from the product form and then it's working properly. 
You need to make sure your form should not contain novalidate attribute. 

[awaisasif]

thanks, it worked for me as well