How to Make a delivery date a Required field in cart

How to Make a delivery date a Required field in cart

arflorezo
Visitor
3 0 0

I have the below code in my Debut theme for customers to select a delivery date. It appears in the cart before checkout. I would like to make it a required field. Can someone help me to make it required field? 🙂 

 

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
<p>
<label for="date">Preferred delivery/Pick up date (mm/dd/yyyy):</label>
<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />

<span style="display:block" class="instructions"> Please note we do not accept pickup or deliveries on Sundays.</span>
</p>
</div>

<script>
window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;

$(function() {
$("#date").datepicker({
minDate: +2,
maxDate: '+3M',

});
});
}
}
</script>

Replies 4 (4)

PremierStores
Shopify Partner
285 28 52

Hi, @arflorezo 

What you need is adding the required parameter in the input tag

<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" required="required" />
Let's make the best store!
Contact us at: thepremierstores@gmail.com
BBSigns
Shopify Partner
6 0 0

I still have the same issue. Used the "required" code addition and still does not work (allows for checkout without date entered). Using "Simple" theme. 

 

Any ideas? 

arflorezo
Visitor
3 0 0

Hello PremierStores, unfortunately it doesn't work. Do you have another idea?

PremierStores
Shopify Partner
285 28 52

Hi, @arflorezo :

 

Your form may have the attribute novalidate on it, something like this:

<form action="/cart" method="post" novalidate class="cart__form">

Remove the novalidate attribute from your form and try it again.

Let's make the best store!
Contact us at: thepremierstores@gmail.com