How to add required text to Simple Theme?

astoriacrossing
Visitor
2 0 0

Hello,

I added a personalization textbox to each of my products using a tutorial I found on here to my Simple Theme. I would like this text to be required before customers can add to cart but currently customers can add to cart without filling out the textbox. The code has "required" in it but it does not work. I tried a variety of tips I found on here but nothing has worked.

My website: astoriacrossing.com
Product page: http://astoriacrossing.com/products/animal-crossing-amiibo-passport-sanrio
My current code:

<p class="line-item-property__field">
<label for="please-enter-the-name-of-the-sanrio-villagers-you-want-here-rilla-marty-etoile-chai-chelsea-and-toby-if-ordering-more-than-1-card-remember-to-change-the-quantity-number">Please enter the name of the Sanrio villager(s) you want here: Rilla, Marty, Etoile, Chai, Chelsea, and Toby.
<br>If ordering more than 1 card, remember to change the quantity number!</label>
<textarea required class="required" id="please-enter-the-name-of-the-sanrio-villagers-you-want-here-rilla-marty-etoile-chai-chelsea-and-toby-if-ordering-more-than-1-card-remember-to-change-the-quantity-number" name="properties[ ]"></textarea>
</p>

 

<div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
<button type="submit" name="add" id="AddToCart" class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} shopify-payment-btn btn--secondary{% endif %}" data-cart-url="{{ routes.cart_url }}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}

Any help would be greatly appreciated. 

Replies 2 (2)

Developer-G
Shopify Partner
3001 588 839

Hello @astoriacrossing ,

You have to use custom validation. 
Follow this code to get an idea.

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
astoriacrossing
Visitor
2 0 0

Hi Guleria, thank you for the reply.

I've played around with the code you sent me and I got it to work. It seemed like my original "Add to Cart" button was not able to identify if the textbox was filled out or not so I deleted all of that code.

My code now looks like this:

<p class="line-item-property__field">
<label for="please-enter-the-name-of-the-sanrio-villagers-you-want-here-rilla-marty-etoile-chai-chelsea-and-toby-if-ordering-more-than-1-card-remember-to-change-the-quantity-number">Please enter the name of the Sanrio villager(s) you want here: Rilla, Marty, Etoile, Chai, Chelsea, and Toby.
<br>If ordering more than 1 card, remember to change the quantity number!</label>
<input id="id1" type="textarea" required id="please-enter-the-name-of-the-sanrio-villagers-you-want-here-rilla-marty-etoile-chai-chelsea-and-toby-if-ordering-more-than-1-card-remember-to-change-the-quantity-number" name="properties[ ]"></textarea>
</p>

<button onclick="myFunction()">Add to Cart</button>

<p id="demo"></p>

<script>
function myFunction() {
const inpObj = document.getElementById("id1");
if (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "";
}
}
</script>

{% endform %}

Now I am wondering if there is a way I can change the size of the textbox? Also, how can I customize the "add to cart" button?

Thank you