Required Field before Adding to Cart if Option is Selected

Solved
ReachingZeus
Tourist
6 1 1

Hello everyone, 

I want to require that the "Embossing" textbox is filled out if "Embossing" option has been selected before adding to the cart. Basically, if the "Embossing" textbox is blank, the item won't be added to the cart unless the textbox has been filled out. I've added an option for "Embossing" in the "Style" dropdown in my new template, product-customizable-template.liquid as shown below:

<p class="line-item-property__field">
<label for="embossing">Embossing</label>
<input required class="required" id="embossing" type="text" name="properties[Embossing]">
</p> 

 Screen Shot 2021-01-09 at 2.14.40 AM.png

The "Style" dropdown has the following code:

<select class="single-option-selector single-option-selector-product-customizable-template product-form__input" id="SingleOptionSelector-0" data-index="option1">
<option value="None" selected="selected">None</option>
<option value="Embossing">Embossing</option>
<option value="Stamp">Stamp</option>
</select>

 

Any help would be gratefully appreciated, thank you!

0 Likes
ReachingZeus
Tourist
6 1 1

This is an accepted solution.

Figured it out:

Removed novalidate: 'novalidate' from my product-customizable-template.liquid and added document.getElementById("embossing").required = true or false under the condition to turn off or on the requirement in my theme.js

0 Likes