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
