1703906 - Time input validity is not updated for partial values

Status: NEW

(Core :: DOM: Forms, defect)

Description

[thompsonpa2014]

Attachment: Shows Bug Related to Firefox and Documentation related to my finding

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36
Firefox for Android

Steps to reproduce:

Hi I'm a web Developer, To Re-produce Check out the following JSFiddle
https://jsfiddle.net/migc44/4aytnmv2/6/

In this example. CSS Just checks to see if the type Time Input is a valid time value. If it is not valid there will be an X next to the input box. if it is valid a check mark will be in X Place to indicate the time is valid.

This Works In Chrome, edge, Opera. and According to Mozilla Documentation it should work as well But it is not.

Actual results:

Users are skipping entering AM/PM in type Time Input box and is causing the page to break

Expected results:

The CSS should indicate the Input box is valid or invalid Like every other web browser.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

It works as you expect if you make the input required, right?

The issue is that the datetimebox widget sets the value "atomically", so a partial value is seen as an empty value from the point of view of the DOM.

Comment 3

[thompsonpa2014]

This is true. Required works as it should, it should work without required as in my case I don't need this field required. Thanks!