Shopify App adding form on the product page with mandatory input

[yohanes-ai]

Hi there

I created a Shopify App with theme app extension framework to add functionality on the product page. My problem is I wanted to add some textbox that required to fill before submitted (before add to card or buy). I have tried to add required="required" and aria-hidden. Please see the code bellow

<div class="field mb-5">
    <input type="text" id="customText" value="" required="required" aria-required="true" class="keyboardInput field__input" dir="rtl" lang="ar" name="properties[Text]" form="product-form-{{ section.id }}">  
    <label for="customText">
      <span aria-hidden="true">*</span>
    </label>
  </div> 

The required not working, I can add to card or just buy with leave it blank to the input type text. Any idea?

Thank you

[yohanes-ai · Accepted solution]

I have found the solution as below

<script>
document.getElementById("product-form-{{ section.id }}").noValidate = false;
</script>