How to Require a Custom Liquid Textarea Field Before “Add to Cart” (Dawn Theme 15.3)

[CV5]

Hi everyone,

I’ve added a custom Liquid <textarea> field to my product page to collect personalized information from customers. The field displays correctly, but I need it to be mandatory—customers shouldn’t be able to add the product to their cart unless they’ve filled it in.

The code:
<label for="engravingText" style="display: block; font-weight: bold; margin: 0;">
Name for engraving
</label>
<textarea
id="engravingText"
name="properties[Name for engraving]"
form="product-form-{{- section.id -}}"
rows="6"
style="padding: 8px; margin: 0; width: 100%; max-width: 400px; border: 1px solid #ccc; border-radius: 4px; resize: vertical;"
></textarea>

Thanks to all.

[PaulNewton]

Hi @CV5 👋 Use the required attribute

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/required

💣 Note that a required textarea, or text input,  just means any gibberish can be put in to fulfill the requirement of having content.

the parent form may need to have novalidate removed for required attributes to work

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/noValidate 

For other readers make note:

Unless the block is literally inside the product form, which most themes don't do then the input also needs to be associated to the actual form using the form attribute

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form 

If you need this customization taken care of instead of having to learn to code themes then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[Shadab_dev]

You will need to add your check on the code which is responsible to adding product in cart. So you check if it's empty and of it is then not add product.

One way is to disable your atc button initially and when the user does enter something or when text area is not empty you can enable that with code. 

Any ways both need customization to the code.

Best

Shadab

[pawankumar]

Hi @CV5 

Please add required attribute to your textarea and see if it works

Thanks!