I’m trying to make the Cart Note field mandatory on the cart drawer.
I have added the “required” tag to both the checkbox and text input within the sections/theme__cart.liquid.
It is showing as “required” on the live site within inspect, and there is no “novalidate” anywhere I can see. However it is not making the field required, and you can simply bypass it.
Any help would be much appreciated.
Code snippet and a screenshot of the live site inspect below.
{% comment %} Cart notes {% endcomment %}
{% if section.settings.main_enable_cart_note %}
<div
class="
border--b-width w-full p-4
{{ section.settings.main_color_scheme_second }}
{{ section.settings.main_color_border }}
"
x-data="{
reveal: cart.note != '',
currentNote: cart.note
}"
x-show="cart.items.length > 0"
x-cloak>
<label class="flex items-center">
<label
class="sr-only"
for="notes">{{ 'actions.add_order_note' | t }}</label>
<input
required
id="notes"
class=""
type="checkbox"
:checked="reveal"
@click="reveal = ! reveal"
>
<p class="ml-2 text--small">{{ 'actions.add_order_note' | t }}</p>
</label>
<textarea
required
class="w-full mt-2"
rows="4"
name="note"
placeholder="{{ 'actions.message_placeholder' | t }}"
x-show="reveal"
x-model="currentNote"
@keyup.debounce="updateCartNote(currentNote)"
x-cloak>
</textarea>
</div>
{% endif %}
