Solved

Shopify App adding form on the product page with mandatory input

yohanes-ai
Shopify Partner
7 2 0

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

Accepted Solution (1)

yohanes-ai
Shopify Partner
7 2 0

This is an accepted solution.

I have found the solution as below

 

 

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

 

View solution in original post

Reply 1 (1)

yohanes-ai
Shopify Partner
7 2 0

This is an accepted solution.

I have found the solution as below

 

 

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