Date Picker - How do I make it mandatory?

Solved
Jenny_McNeill
Tourist
4 1 3

I'm using the Shopify suggested code to add a date picker to my checkout process, however, I can't seem to make it mandatory. This is the code I have inserted. Can anyone help?

https://help.shopify.com/themes/customization/cart/add-date-picker-for-delivery-dates#sectioned-them...

Thanks.

0 Likes
Ivan10
Shopify Partner
4 0 1

 

Hi Jenny,

You can add required into input tag.

Instead this:

<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />

Use this code: 

<input required id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />

 

0 Likes
Jenny_McNeill
Tourist
4 1 3

Thanks Ivan, but that's not working.

I followed an old thread, which said add this code, but no idea where to put it!

 

script>
$(function() {
  $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if ($('#date').val() == '') {
      alert("You must pick a delivery date"); 
      return false;
    }
    else {
      $(this).submit();
    }
  });
});
</script>
0 Likes
Jenny_McNeill
Tourist
4 1 3

This is an accepted solution.

In case anyone finds this thread - this is how we made it work in the end:

$(document).ready( function() {
  // Adds date picker to field
  $(function() {
    $("#date").datepicker( {
      minDate: +3,
      maxDate: '+6M',
      dateFormat: "dd/mm/yy"
    } );
  });
  // Makes sure basket can not be checked out without a delivery date being selecting
  $("[name='checkout']").click(function() {
    if ($('#date').val() == "" || $('#date').val() === undefined)
    {
      alert("You must pick a delivery date");
      return false;
    } else {
      //$(this).submit();
      return true;
    }
  });
});

 

Teresa_Howard
New Member
1 0 0

Where did you add the code to make the date picker required? 

0 Likes
Joel_Crump
Shopify Partner
3 0 7

Something to check on is if the theme has used the novalidate attribute in the cart form:

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

Change it to:

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

Removing this will let you add the required attribute to your date input:

<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" required />

This worked for us. Hope it helps anyone else reading that doesn't want to use the JS method above.

0 Likes
MirandaSanchez
New Member
1 0 0

In case none of the above work...

 

On the cart-template.liquid delete the nonvalidate

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

For 

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

 

And then add this line to your input line

<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}"required="" >

 

 

Hope this helps!

 

0 Likes