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

andibuyz
Tourist
8 1 2

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):

<h3>Choose your Delivery / Collection date</h3>
<div>
<input required class="required" type='text' id='DelPickupDate' name="attributes[DelPickupDate]" value="{{ cart.attributes["DelPickupDate"] }}" placeholder='select a date' />
</div>

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:

<h3>Choose your Delivery / Collection date</h3>
<div>
<input readonly="readonly" required class="required" type='text' id='DelPickupDate' name="attributes[DelPickupDate]" value="{{ cart.attributes["DelPickupDate"] }}" placeholder='select a date' />
</div>

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

KetanKumar
Shopify Partner
15811 1755 5828

@andibuyz 

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

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

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
andibuyz
Tourist
8 1 2

Hi, sorry just catching up after a busy week selling

we are at

https://didicakesbath.com/cart

 

thanks

 

Andrew

0 Likes
KetanKumar
Shopify Partner
15811 1755 5828

@andibuyz 

its work

KetanKumar_0-1615159193762.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
andibuyz
Tourist
8 1 2

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

0 Likes
Ninthony
Shopify Partner
1712 241 657

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 <script> tags in theme.liquid right before the closing </body> tag:

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

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

// or in theme.liquid 

<script>
let dateInput = document.getElementById('DelPickupDate');

dateInput.addEventListener('focus', function(){
  this.blur()
});
</script>

 

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

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes