How to add required text to Simple Theme?

astoriacrossing
New Member
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)
Guleria
Shopify Partner
1810 382 546

Hello @astoriacrossing ,

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

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
astoriacrossing
New Member
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