How can I make custom variant options required on my product page?

[Chisty]

I have some custom "options" on my product page to personalise the product beyond the normal variants and I can pass the info through to the shopping basket, but how do I make those fields "required"?

I have tried a simple "required" command but to no avail

     {% for tag in product.tags %}
        {% if tag == 'Ash' %}

     <label class="form__label" for="custom-name"style="padding-top: 15px;">Their Name (Name of loved one lost)</label>
<input type="text" id="custom-name" form="{{product_form_id}}" name="properties[Name Of Loved One Lost]" placeholder="Just For Info" style="padding: 20px; font-size: 20px;width: 400px;">

       {% endif %}
      {% endfor %}

thanks in advance

here is a sample input box that I am trying to make required 

[PaulNewton · Accepted solution]

Line-item Scripts are checkout scripts only available to Shopify Plus plans.

Please do not label things arbitrarily.

Your on the right track all it normally takes for a required input is the required attribute

<input required type="text" .....

 Though in some themes there is a novalidate attribute on the forms that needs to be removed.

For themes based on the dawn reference theme that should be in buy-buttons snippet https://github.com/Shopify/dawn/blob/main/snippets/buy-buttons.liquid#L47 

[Chisty]

Thank you. I have tried that but it doesn't resolve the issue. 

[Chisty]

Apologies, I never read the bit about the "nonvalidate" That has sorted it and it works perfectly, thanks very much. 

[Klpye01]

Hi. How did you resolve this?  I am not finding a "nonvalidate" attribute in my Dawn Theme main-product.liquid.  I was able to add the field just fine but cannot make it required.

[Chisty]

Its on the "buy buttons. liquid". click on the githib link above

[Klpye01]

Thank you SO much!  That worked perfectly!!

[djortiz]

Hi, I've removed the "nonvalidate" attribute on the buy buttons. liquid code snippet. Do I also need to add required attribute? If so, where does that need to be added?

[EasifyApps-Zoe]

Hi @Chisty,

I noticed that you have already received a suggestion on how to make custom options "required," but I'd like to offer an alternative solution that is simpler and doesn't require any coding. This way, if you encounter similar issues in the future or if other members have similar concerns, they can consider this solution as well 🤗.

You can utilize the Easify Product Options app (free plan available), to create and manage your custom options more effectively. When setting up each custom option, there is a simple configuration option that allows you to designate whether it is required or not.

Here's a quick demonstration of how you can set a custom option as required or optional using the app 👌: