How can I make delivery date and instructions mandatory in cart attributes?

[ecoWeb]

Hi,

I need some help with cart attribute option on cart page.

In my store here - https://flowershopnz.myshopify.com/admin

I want to have these fields mandatory – Delivery Date. And Delivery Instruction as below. It is showing ok on the website but when I tested it the text customers put in the boxes don't come through to the order form.

image

This is how and where I added the codes.

It did show once here in the order form but it disappears.

on my second test it came up like this

Cart_exist

true

This is my coding

 <div class="cart__footer">

        <div class="grid">

          {%- if section.settings.cart_notes_enable -%}

            <div class="grid__item medium-up--one-half cart-note">

           <p class="cart-attribute__field">

  <label for="delivery-date">Delivery Date</label>

  <input id="delivery-date" type="text" name="attributes[Delivery Date]" value="{{ cart.attributes["Delivery Date"] }}">

</p> <p class="cart-attribute__field">

  <label for="delivery-instruction">Delivery Instruction</label>

  <input id="delivery-instruction" type="text" name="attributes[Delivery Instruction]" value="{{ cart.attributes["Delivery Instruction"] }}">

</p>

              <label for="CartSpecialInstructions" class="cart-note__label small--text-center">Complimentary Gift Card Message</label>

<textarea name="note" id="CartSpecialInstructions" class="cart-note__input" data-cart-notes="">{{ cart.note }}</textarea>

          </div>

          {%- endif -%}

          <div class="grid__item text-right small--text-center{% if section.settings.cart_notes_enable %} medium-up--one-half{% endif %}">

            {%- assign cartDiscounts = 'template ' | split: ' ' -%}

            {%- if cart.cart_level_discount_applications.size > 0 -%}

              {%- assign cartDiscounts = cart.cart_level_discount_applications -%}

            {%- endif -%}

            <div{% if cart.cart_level_discount_applications.size == 0 %} class="hide"{% endif %} data-cart-discount-wrapper>

              <div class="order-discount-card-wrapper" data-cart-discount>

                {%- for discount_application in cartDiscounts -%}

                  <span class="order-discount order-discount--title order-discount--cart">

                    {% include 'icon-saletag' %}<span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span><span data-cart-discount-title>{{- discount_application.title -}}</span>

                  </span>

                  <span class="order-discount order-discount--cart order-discount--cart-total">

                    -<span data-cart-discount-amount>{{ discount_application.total_allocated_amount | money }}</span>

                  </span>

                {%- endfor -%}

              </div>

            </div>

Please let me know if you guys can help.

Thank you