1372369 - I can enter 31/02/2017 (pt-br) as a date

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, enhancement)

Description

[Alexandre Folle de Menezes]

I was trying the new date form controls, and it does a fair job of restricting the inputs.  But I was able to enter 31/02/2017 (in pt-br) as a date with no complaints.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

What was the value you entered?  The summary says "31-02-217" and comment 0 says "31/02/2017".

Comment 2

[Jessica Jong [:jessica] (inactive)]

I think reporter means "31/02/2017" in pt-br.

We avoid setting invalid value to the input element's .value property, otherwise, the value would become empty after sanitizing. But yes, we do need to inform the user about this, so I think we need a way to set validity state to "bad input" (This is what Chrome does too after entering 31/02/2017).

Comment 3

[Alexandre Folle de Menezes]

let me try to elaborate some more...
- I only entered the digits, it was automatically formatted to 31/02/2017.  Yes, the title was wrong.  Sorry.
- This issue is about accepting invalid dates, not about the formatting.
- I gave one extreme example, but it is not the only invalid date that is accepted.  Other accepted dates: 29/02/2100 (not a leap year), and 31/04/2017 (April has only 30 days).

Comment 4

[Jessica Jong [:jessica] (inactive)]

Attachment: Part 1: Update input element's value when all fields are entered.

In this patch, we change it so that we always set the input element's value
once all fields are available and let DOM HTMLInputElement sanitize it. The
value after sanitization is not updated in the displayed input box, but may
display an error message (this will be done in Part 2) if needed.
Also, when any of the field's value is deleted, we will set input element's
value back to the empty string, so that a value is not accidentally submitted.

Comment 5

[Jessica Jong [:jessica] (inactive)]

Attachment: Part 2: Set validity state to 'bad input' when the entered date value is invalid.

If all fields in date/time input box are available but the input element's
value is empty, implies that it has been sanitized. In this case, we'll set the
'bad input' vailidty state. If any of the fields is cleread, we'll remove the
'bad input' validity state, as incomplete field does not imply 'bad input'.

Comment 6

[Olli Pettay [:smaug][[e-mail]]]

Comment on attachment 8878393 [details] [diff] [review]
Part 1: Update input element's value when all fields are entered.

This would need some manual testing too, to see the ux. I didn't do that.

Comment 7

[Olli Pettay [:smaug][[e-mail]]]

Comment on attachment 8878394 [details] [diff] [review]
Part 2: Set validity state to 'bad input' when the entered date value is invalid.

># HG changeset patch
># User Jessica Jong <[e-mail]>
># Parent  38ec76213d854d60628be397d5f3d43e3fe4fc84
>Bug 1372369 - Part 2: Set validity state to 'bad input' when the entered date value is invalid. r=smaug
>
>If all fields in date/time input box are available but the input element's
>value is empty, implies that it has been sanitized. In this case, we'll set the
>'bad input' vailidty state. 
validity

If any of the fields is cleread, we'll remove the
cleared

>@@ -7629,16 +7643,18 @@ HTMLInputElement::GetValidationMessage(n
>     case VALIDITY_STATE_BAD_INPUT:
>     {
>       nsXPIDLString message;
>       nsAutoCString key;
>       if (mType == NS_FORM_INPUT_NUMBER) {
>         key.AssignLiteral("FormValidationBadInputNumber");
>       } else if (mType == NS_FORM_INPUT_EMAIL) {
>         key.AssignLiteral("FormValidationInvalidEmail");
>+      } else if (mType == NS_FORM_INPUT_DATE && IsInputDateTimeEnabled()) {
>+        key.AssignLiteral("FormValidationInvalidDate");
So we don't need to care about time or week or month or datetime here, only date?
Please add a comment.

Comment 8

[Jessica Jong [:jessica] (inactive)]

(In reply to Olli Pettay [:smaug] from comment #6)
> Comment on attachment 8878393 [details] [diff] [review]
> Part 1: Update input element's value when all fields are entered.
> 
> This would need some manual testing too, to see the ux. I didn't do that.

I did some basic manual testing, looks ok. After both patches, the red box shows up when user enters an invalid value, e.g. Jun 31 2017, and the red box disappears when all or any of the fields value is removed.

(In reply to Olli Pettay [:smaug] from comment #7)
> Comment on attachment 8878394 [details] [diff] [review]
> Part 2: Set validity state to 'bad input' when the entered date value is
> invalid.
> 
> ># HG changeset patch
> ># User Jessica Jong <[e-mail]>
> ># Parent  38ec76213d854d60628be397d5f3d43e3fe4fc84
> >Bug 1372369 - Part 2: Set validity state to 'bad input' when the entered date value is invalid. r=smaug
> >
> >If all fields in date/time input box are available but the input element's
> >value is empty, implies that it has been sanitized. In this case, we'll set the
> >'bad input' vailidty state. 
> validity
> 
> If any of the fields is cleread, we'll remove the
> cleared

Thanks, will correct the typos.

> 
> >@@ -7629,16 +7643,18 @@ HTMLInputElement::GetValidationMessage(n
> >     case VALIDITY_STATE_BAD_INPUT:
> >     {
> >       nsXPIDLString message;
> >       nsAutoCString key;
> >       if (mType == NS_FORM_INPUT_NUMBER) {
> >         key.AssignLiteral("FormValidationBadInputNumber");
> >       } else if (mType == NS_FORM_INPUT_EMAIL) {
> >         key.AssignLiteral("FormValidationInvalidEmail");
> >+      } else if (mType == NS_FORM_INPUT_DATE && IsInputDateTimeEnabled()) {
> >+        key.AssignLiteral("FormValidationInvalidDate");
> So we don't need to care about time or week or month or datetime here, only
> date?
> Please add a comment.

Sorry, I forgot to mention this. For the two input types (date and time) that we support now, only date may have bad input, since with input time, we forbid or autocorrect values that are not in the valid range. For example, in 12hr format, if users enter 2 in the hour field, it will be treated as 02 and advance to the second field; in 24hr format, if user enters 25 in the hour field, it's automatically corrected to 23 and advance to the second field.

Comment 9

[Jessica Jong [:jessica] (inactive)]

(In reply to Jessica Jong [:jessica] from comment #8)
> Sorry, I forgot to mention this. For the two input types (date and time)
> that we support now, only date may have bad input, since with input time, we
> forbid or autocorrect values that are not in the valid range. For example,
> in 12hr format, if users enter 2 in the hour field, it will be treated as 02
> and advance to the second field; in 24hr format, if user enters 25 in the

Sorry, should be "minute field" in both of the cases above.

Comment 10

[Jessica Jong [:jessica] (inactive)]

Attachment: Part 2: Set validity state to 'bad input' when the entered date value is invalid, v1.

Fixed typos, added comments and some more tests.

Comment 11

[Jessica Jong [:jessica] (inactive)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=ede52c4baff6ab20950301186d408fa1c8f9f339&group_state=expanded

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/197dee6bc476
Part 1: Update input element's value when all fields are available and let DOM HTMLInputElement sanitize it. r=smaug
https://hg.mozilla.org/integration/mozilla-inbound/rev/b9a984aa8176
Part 2: Set validity state to 'bad input' when the entered date value is invalid. r=smaug

Comment 13

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/197dee6bc476
https://hg.mozilla.org/mozilla-central/rev/b9a984aa8176

Comment 14

[roxleitan]

Verified as fixed on Firefox Nightly 56.0a1(2017-06-20 build) on Windows 10 x 64, Mac OS X 10.12 and Ubuntu 16.04 x64.

When entering "31/02/2017" value, the input box becomes red and on hover, the "Please enter a valid date" message appears.

Comment 15

[Alexandre Folle de Menezes]

I tested with other edge cases, they all seem OK.
29/02/2000 (leap year)
29/02/2017 (not a leap year)
29/02/2100 (not a leap year)
31/06/2017 (June has only 30 days)