Required Field before Adding to Cart if Option is Selected

[ReachingZeus]

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> 

 

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!

[ReachingZeus · 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