How to create custom field that is required and saving data to admin panel at the checkout?

VladTeplin
New Member
1 0 0

I am having issues with custom field that I created in checkout.liquid file. It has to be required, blink if it is empty and send data to the admin panel with an order. How to do this? Right now I have: 

<main class="main__content" role="main">
            <!-- Order Type -->
          <div class="section__header" id="OrderType" required="required">
              <div class="layout-flex layout-flex--tight-vertical layout-flex--loose-horizontal layout-flex--wrap">
                <h2 class="section__title layout-flex__item layout-flex__item--stretch" id="main-header" tabindex="-1" required="required">
                  Order Type
                </h2>
</div>
            </div>
          <!-- Order Type -->
          
            <div class="field--required field--third field--show-floating-label order_details_type" data-autocomplete-field-container="true" style="width:100%; padding:0;" required="required">
              <div class="field__input-wrapper field__input-wrapper--select"><label class="field__label field__label--visible" for="checkout_shipping_order_type" required="required">Type of Order ?</label>
                <select placeholder="Order Type?" size="1" class="field__input field__input--select order__Type_select" aria-required="true"  id="checkout_shipping_order_type" placeholder="Type of Order ?" name="checkout[attributes][Order Type?]">
<option value="default" disabled selected required="required">Order Type?</option>                  
<option value="0">
                    Internal Flying Embers Sales Team
                  </option>
                  <option value="1" required="required">
                    External Wholesale Partner
                  </option>
                </select>
                <div class="field__caret">
                  <svg class="icon-svg icon-svg--color-adaptive-lighter icon-svg--size-10 field__caret-svg" role="presentation" aria-hidden="true" focusable="false"> <use xlink:href="#caret-down"></use> </svg>
                </div>
                </div>
              <div id="external_partner" class="field__input-wrapper field__input-wrapper--select external-field" style="padding: 15px 0; display: none;" required="required">
                <input placeholder="Distributor Name" name="checkout[attributes][Distributor Name]" value="{{ checkout.attributes["Distributor Name"] }}"  type="text" style="border: 1px #d9d9d9 solid;background-clip: padding-box;border-radius: 5px;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 0.9285714286em 0.7857142857em;word-break: normal;" required="required">
                </div>
              <div class="section__header">
                <strong>
                  <p class="internal_flying_embers" style="margin-left: 15px;margin-top: 8px;display:none; padding-top: 30px;">
                    Total cost including freight will be billed against FE internal sales budget.
                  </p>
                </strong>
                <strong>
                  <p class="external_wholesale_partner" style="margin-left: 15px;margin-top: 8px;display:none;">
                    Please note, no payment is due now and invoice including freight will be billed within 30 days.
                  </p>
                </strong>
              </div>
            </div>
          <div id="errormsg" style="padding-bottom:1.5rem;display:none;">
            <p style="color:red;">Please choose an order type.</p>
          </div>
 
Thanks
Replies 0 (0)