Custom product 'required' field not working

Highlighted
New Member
28 0 0

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.

0 Likes
Highlighted
Shopify Expert
540 24 118

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.

★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
0 Likes
Highlighted
New Member
28 0 0

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>
0 Likes
Highlighted
New Member
28 0 0

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

0 Likes
Highlighted
Shopify Expert
540 24 118

Can you post a link to the live store?

★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
0 Likes
Highlighted
New Member
1 0 0

I need help with this same issue.

 

www.shopwildcharm.com

0 Likes
Highlighted
New Member
2 0 0

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>
        

0 Likes
Highlighted
New Member
1 0 0

I have this same issue as well. Here's the code I am using. Screen Shot 2020-10-18 at 10.17.19 PM.png

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

0 Likes
Highlighted
New Member
2 0 0

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.

0 Likes