Making Cart Note Mandatory

[CAH_SOU]

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 %}

[Eric-HAN]

Hi there  add below code  as properties into your textarea element

oninvalid="this.setCustomValidity('Please fill out this field')"
oninput="this.setCustomValidity('')"