CODEWITHSUNDEEP
iosiphonehtmlinputsafari
Mark Tomlin
Mark Tomlin

Reputation: 8943

Mobile Safari (10.3.1) DateTime-Local "Enter a Valid Value" Error

I'm getting an error on the newer versions of iOS' Mobile Safari. This error didn't happen prior to version 10.3 of iOS. Can someone point me in the right direction on this?

Here's the raw HTML and attached are the inspected view and the view of the mobile device (iPhone 7).

Inspector View iPhone 7 View

Upvotes: 17

Views: 14429

Answers (7)

Adam Taylor
Adam Taylor

Reputation: 4839

This is fixed in iOS 15.4. On iOS 15.3.1, as soon as the user taps on the input, it automatically gets populated with the current date/time and the value will be something like this:

2022-03-18T13:30:45.123

So, unless the user changes the date and/or time to something else, submitting the form will cause a client-side validation error.

But on iOS 15.4, as soon as the user taps on the input, it still automatically gets populated with the current date/time, but now the value will be something like this:

2022-03-18T13:30

Upvotes: 0

cnordling
cnordling

Reputation: 11

format('Y-m-d\TH:i') worked for me.

Upvotes: 0

NamHoon Jung
NamHoon Jung

Reputation: 71

For the whom still struggle with IOS datetime-local same as me.

This caused by IOS set datetime-local value in invalid format when value attribute/property not set or set with invalid one.

<input type='datetime-local' onChange='alert(event.target.value)'>

This will alert with 'yyyy-MM-ddThh:mm:ss' format such as 2018-12-25T12:00:00 which has unallowed string of seconds.

To bypass it, simply set the value with valid form.

const onChange = (event) => {
    event.target.value = event.target.value.substr(0, 16);
}

That`s it.

Upvotes: 7

Matt
Matt

Reputation: 1564

This message is triggered by client-side validation. If you are not using client-side validation then I found you can fix this issue by turning it off using the novalidate attribute as follows:

<form action="/myaction" method="POST" novalidate>

Upvotes: 8

Eric Guo
Eric Guo

Reputation: 1775

Seems it's a bug in Safari, but you can skip it by using javascript to submit the form.

$("#new_apply_form").submit();

Upvotes: 3

Joshua
Joshua

Reputation: 456

It is a bug in Safari. You should use JS to submit the form instead.

JS: form.submit();

Upvotes: 1

Frank Turano
Frank Turano

Reputation: 134

Simple solution!

IOS requires a value to be set on an input field with a type of "datetime-local".

Example: <input type="datetime-local" value="2000-07-01T12:00" />

That's it :)

I personally find it nice to set the default value to the users current local time. This has to be formatted in ISOTime without seconds, so the code for this might be something like:

// get the iso time string formatted for usage in an input['type="datetime-local"']
var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
var localISOTime = (new Date(Date.now() - tzoffset)).toISOString().slice(0,-1);
var localISOTimeWithoutSeconds = localISOTime.slice(0,16);

// select the "datetime-local" input to set the default value on
var dtlInput = document.querySelector('input[type="datetime-local"]');

// set it and forget it ;)
dtlInput.value = localISOTime.slice(0,16);

Upvotes: 11

Related Questions