1490077 - Input validation errors should appear in the red popup the same as merchant-supplied address errors

Status: RESOLVED FIXED

(Firefox :: WebPayments UI, enhancement, P1)

Description

[Jared Wein [:jaws] (please needinfo? me)]

We show field-specific merchant-supplied shipping address errors in a popup next to the field when the field is focused. But if the field has a missing or an invalid value then the error message only appears in a tooltip that is visible on mouse hover.

The latter comes from the DOM `required` implementation.

Comment 1

[Matthew N. [:MattN]]

This is needed for user testing.

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1490077 - Reflect DOM validation messages on the error popup on the address and basic-card form. r?MattN

Comment 3

[Matthew N. [:MattN]]

Comment on attachment 9010740 [details]
Bug 1490077 - Reflect DOM validation messages on the error popup on the address and basic-card form. r?MattN

Matthew N. [:MattN] (PM me if requests are blocking you) has approved the revision.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/29f6f86fb9cd
Reflect DOM validation messages on the error popup on the address and basic-card form. r=MattN
https://hg.mozilla.org/integration/mozilla-inbound/rev/9b038cd736cf
PaymentRequest: RTL debugging toggle and fixes. r=trivial

Comment 5

[Matthew N. [:MattN]]

Assigning to myself since I made significant fixes/changes.

Comment 6

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/e066ff13872b
Backed out 2 changesets for failures in browser/components/payments/test/mochitest/test_address_option.html on a CLOSED TREE

Comment 7

[Noemi Erli[:noemi_erli]]

Backed out 2 changesets (Bug 1490077) for failures in browser/components/payments/test/mochitest/test_address_option.html on a CLOSED TREE

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&resultStatus=testfailed,busted,exception&classifiedState=unclassified&revision=9b038cd736cf32f186c25c19a00c39f4fbd7c526&selectedJob=200676941

Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=200676941&repo=mozilla-inbound&lineNumber=3569

Backout: https://hg.mozilla.org/integration/mozilla-inbound/rev/e066ff13872b84231dc343563b47c67da6e20037

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/75036af7d851
Reflect DOM validation messages on the error popup on the address and basic-card form. r=MattN
https://hg.mozilla.org/integration/mozilla-inbound/rev/ba05fe7eaf0a
PaymentRequest: RTL debugging toggle and fixes. r=trivial

Comment 9

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/75036af7d851
https://hg.mozilla.org/mozilla-central/rev/ba05fe7eaf0a

Comment 10

[Timea Cernea [:tbabos][inactive]]

Hi Matt,

The validation errors appear now in a red popup when the invalid field is focused. However, we are not sure how to properly validate the error strings since only the one for the ZIP Code (and is also not respected) appears in the design doc: https://mozilla.invisionapp.com/share/YAFI31XR3KP#/screens/275361828. Can we find them somewhere else or these are not the final strings?

Just to present a quick summary, here are all the error string: 

Please fill out this field.  - all other fields

Please match the requested format.    - ZIP/Postal Code validation

Please select an item in the list.    - dropdown error string

Please use at least 9 characters (you are currently using X characters).   - CC number

Please enter a valid card number  -  CC number (without a dot. Shouldn't all string be without a dot at the end?)



As for the dropdown error string, we found the following behavior: https://streamable.com/vf5ml. Should we submit a bug?

Comment 11

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Timea Babos from comment #10)
> Hi Matt,
> 
> The validation errors appear now in a red popup when the invalid field is
> focused. However, we are not sure how to properly validate the error strings
> since only the one for the ZIP Code (and is also not respected) appears in
> the design doc:
> https://mozilla.invisionapp.com/share/YAFI31XR3KP#/screens/275361828. Can we
> find them somewhere else or these are not the final strings?

These are the possible strings that can appear:
https://searchfox.org/mozilla-central/rev/0640ea80fbc8d48f8b197cd363e2535c95a15eb3/dom/locales/en-US/chrome/dom/dom.properties#34-59

> Please enter a valid card number  -  CC number (without a dot. Shouldn't all
> string be without a dot at the end?)

Yes, that is a bug. That string is defined at
https://searchfox.org/mozilla-central/rev/0640ea80fbc8d48f8b197cd363e2535c95a15eb3/browser/extensions/formautofill/locales/en-US/formautofill.properties#139

Can you please file a bug to track this?

> As for the dropdown error string, we found the following behavior:
> https://streamable.com/vf5ml. Should we submit a bug?

The error popup only appears when the field has focus, and in the case of dropdowns the dropdown is usually open when the field has focus. I'm not actually sure what we can do in this case, as we can't detect if the dropdown is open or not through front-end code. I'll leave the needinfo open for this last question.

Comment 12

[Matthew N. [:MattN]]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #11)
> (In reply to Timea Babos from comment #10)
> > Hi Matt,
> > 
> > The validation errors appear now in a red popup when the invalid field is
> > focused. However, we are not sure how to properly validate the error strings
> > since only the one for the ZIP Code (and is also not respected) appears in
> > the design doc:
> > https://mozilla.invisionapp.com/share/YAFI31XR3KP#/screens/275361828. Can we
> > find them somewhere else or these are not the final strings?

We didn't implement final strings yet: Bug 1490446 - Finalize field-specific error message strings

> These are the possible strings that can appear:
> https://searchfox.org/mozilla-central/rev/
> 0640ea80fbc8d48f8b197cd363e2535c95a15eb3/dom/locales/en-US/chrome/dom/dom.
> properties#34-59
> 
> > Please enter a valid card number  -  CC number (without a dot. Shouldn't all
> > string be without a dot at the end?)
> 
> Yes, that is a bug. That string is defined at
> https://searchfox.org/mozilla-central/rev/
> 0640ea80fbc8d48f8b197cd363e2535c95a15eb3/browser/extensions/formautofill/
> locales/en-US/formautofill.properties#139
> 
> Can you please file a bug to track this?

I agree with Jared.

> > As for the dropdown error string, we found the following behavior:
> > https://streamable.com/vf5ml. Should we submit a bug?
> 
> The error popup only appears when the field has focus, and in the case of
> dropdowns the dropdown is usually open when the field has focus. I'm not
> actually sure what we can do in this case, as we can't detect if the
> dropdown is open or not through front-end code. I'll leave the needinfo open
> for this last question.

We're doing what UX asked us to do (show only on focus) so I defer to them… personally I think the problem pointed out by the red outline is obvious enough so it's probably not a big deal, probably not needed for M3 either way. Upon load of the edit page we are supposed to auto-focus a field with errors so that would help for the first error field. (That's line 46 in https://docs.google.com/spreadsheets/d/1qY0GrH9vDu7bnqjiLtRplh4Y10af_48WqHK1PPAoxyo/edit#gid=468547005 and not filed yet).

Comment 13

[Timea Cernea [:tbabos][inactive]]

Submitted Bug 1494888 for the strings that have dots.

Comment 14

[Jacqueline Savory [:jsavory] UX]

For the dropdowns, there is a conflict that the in-context text will overlap with the dropdown information, so we could show the text above the dropdown instead of below where we usually have it. Would we be able to do something like this? I agree that its not needed for M3, but we will need to solve this for MVP.

Comment 15

[Timea Cernea [:tbabos][inactive]]

We also observed that the error strings for the fields that are right above the tooltip will also overlap each other, screenshot here: https://imgur.com/FOQJXou

Comment 16

[Hani Yacoub, Desktop QA]

Removing the qe-verify+ flag since the feature is disabled.