<input type="time"> with HH:MM:SS time set by javascript is reported as invalid
Categories
(Core :: DOM: Forms, defect, P3)
Tracking
()
People
(Reporter: m.zdila, Unassigned)
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:74.0) Gecko/20100101 Firefox/74.0
Steps to reproduce:
I have created a <form> with <input type="time"> and set its value in Javascript to 16:30:45.
Actual results:
After submitting form FF reports to select a valid value and the nearest are 16:30 and 16:31.
Expected results:
It should submit the form (with value 16:30:45).
AFAIK it started in FF 73.
Setting step="1" works around this issue.
|
||
Comment 1•4 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
||
Comment 2•4 years ago
|
||
I don't think it's regression, I can see the same behavior on Firefox 57. Also I am not sure whether it's a bug because I am not familiar with the HTML spec (I also see the same behavior on Chrome as well).
|
||
Comment 3•4 years ago
|
||
The following, minimal example works with current Firefox on Ubuntu 18.04 (can be tested by copy&pasting it to the address bar):
data:text/html,<input type="time"><script>document.querySelector("input").value="15:45:34"</script>
So I'm inclined to close this ticket as invalid. I'm not sure what codesandbox.io does in the background, so perhaps it's a bug on that page? If I've overlooked something, please let me know.
Mirko, your minimal example doesn't work for me. I see the field with red border.
FF 74.0 (64-bit) on Debian Buster.
|
|
||
Comment 5•4 years ago
•
|
||
m.zdila, right, the same for me. Thanks for pointing this out. According to the spec, the default step is 60 seconds. Like you mentioned initially, setting it to 1 fixes the problem. I haven't checked the validation algorithm in detail, but my intuitive understanding is that the input field's value has to be a multiple of step.
Actually simmilar problem is with type="number":
data:text/html,<input type="number"><script>document.querySelector("input").value="1.5"</script>
Also if the value is set in the markup then the fiels is valid:
data:text/html,<input type="time" value="15:45:34"><script>document.querySelector("input").value="15:45:34"</script>
In following case the field is valid (not having red border):
data:text/html,<input type="time"><script>document.querySelector("input").value="foo"</script>
|
|
||
Comment 7•4 years ago
|
||
(In reply to m.zdila from comment #6)
Actually simmilar problem is with
type="number":data:text/html,<input type="number"><script>document.querySelector("input").value="1.5"</script>
Can be fixed by setting step=0.1. Analogous reasoning as above.
Also if the value is set in the markup then the fiels is valid:
data:text/html,<input type="time" value="15:45:34"><script>document.querySelector("input").value="15:45:34"</script>
Interesting. This doesn't work for
data:text/html,<input type="time" value="15:45:34"><script>document.querySelector("input").value="15:45:35"</script>
That is, the field is invalid. Same in Chrome.
In following case the field is valid (not having red border):
data:text/html,<input type="time"><script>document.querySelector("input").value="foo"</script>
That's according to spec:
The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.
|
|
||
Updated•4 years ago
|
|
||
Comment 8•4 years ago
|
||
Because this bug's Severity has not been changed from the default since it was filed, and it's Priority is P3 (Backlog,) indicating it has been triaged, the bug's Severity is being updated to S3 (normal.)
|
||
Comment 9•10 months ago
|
||
(In reply to m.zdila from comment #6)
Also if the value is set in the markup then the fiels is valid:
data:text/html,<input type="time" value="15:45:34"><script>document.querySelector("input").value="15:45:34"</script>
That is because of the step base. By specifying the value content attribute as 34 seconds, any time has to end on 34 seconds to be valid.
There does not seem to be a bug here. Per the spec, an element satisfies its constraints if it is not suffering from any validity states. <input type="time"><script>document.querySelector("input").value="15:45:34"</script> has a default step of 60 seconds, step scale of 1000 and according to the step attribute, thus suffers from a step mismatch. In the given situation, the form submission algorithm will interactively validate the constraints and then stop the submission.
Description
•