Input field validation [Required] not working with [Readonly] setting?

Store Design
1

Hi,

I hope someone can help me.

Using the MINIMAL theme…

We fulfil customer orders on the date they choose, we restrict the dates to exclude Sundays, public holidays etc

To gather their required delivery date I use datepicker and an input field (shown below):

Choose your Delivery / Collection date

This works most of the time, however some customers have worked out they can just type a date in the field and this is generating orders we can’t fulfil.

I have tried to block this using:

Choose your Delivery / Collection date

BUT this is creating a new problem. When I use this code it does stop customers typing dates in HOWEVER now the ‘required’ validation no longer works and the cart page allows customer to move onto to checkout without entering any date - this is even worse for us.

Does anyone know how to block typed entry into my input field whilst also ensuring a date is selected before moving onto the checkout page?

Thankyou

Andy

1 Like
2

@andibuyz

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.

3

Hi, sorry just catching up after a busy week selling :slightly_smiling_face:

we are at

https://didicakesbath.com/cart

thanks

Andrew

4

@andibuyz

its work

KetanKumar_0-1615159193762.png
KetanKumar_0-1615159193762.png1920×1080 372 KB

5

Hi,

Yes it works at the moment but I don’t have the READONLY in the code right now. I will put that in and then if you retry it, you will see that it will stop you typing into the field but the page will then allow you to move onto checkout with nothing in the field

6

You could leave it as it is, and make read only with javascript. You can say, whenever someone clicks into the input field, to blur it, which essentially takes focus off of it. You can put this in your theme’s JS file, or put it in tags in theme.liquid right before the closing tag:

let dateInput = document.getElementById('DelPickupDate');

dateInput.addEventListener('focus', function(){
  this.blur()
});

// or in theme.liquid

This way they won’t be able to change the text field. I checked and it doesnt affect the date picker functionality

7

Hi, Thanks so much for your help on this, I have been crazy busy but have finally got round to implementing your solution. One week in and it seems to be working well both on desktop and mobile.> > Thanks again

8

No problem, glad it helped.