amp-form: Support auto formatting

[aghassemi]

Many form inputs use JS to auto format fields such as dates, credit card numbers and phone numbers as user types (e.g. auto insert separators, stop accepting input after x charters, etc..)

For a few examples see jQuery Mask Plugin: https://igorescobar.github.io/jQuery-Mask-Plugin/

We should support such use-cases in AMP, if we somehow manage to make it super generic and use the RegEx specified in validation's "pattern" (with an explicit opt-in) that would be awesome, otherwise a decent subset of common cases ( essentially the ones supported by the jQuery plugin) would be a good start.

/to @cvializ
/cc @rudygalfi @ericlindley-g

[cvializ]

This has been on my mind too, I think it is a great idea to prioritize this for e-commerce.

[choumx]

@lswang1618 was interested in this for credit card fields in amp-payment IIRC. /cc @cathyxz

[lswang1618]

+1! this was the library I looked at: https://github.com/RobinHerbots/Inputmask

it has some cool options like dynamically changing the masking w/ user input (i.e. changing a credit card pattern as the user types)

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?

[lswang1618]

I think the subset of use cases we want to support are

• Date
• Telephone
• Credit Card number
• Money amount
• Zip code
• Time

But I don't actually think full regex support is necessary for most use cases. All we really need is

• Shorthand definitions for numbers, letter, and numbers + letters (i.e. https://screenshot.googleplex.com/k4YsZ9tV7oR)
• Recursive and optional flags (i.e. https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#translation)
• A placeholder attribute (i.e. {placeholder: //____)}

This should be enough to support the major use cases. Thoughts?

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?

[cvializ]

Link to design doc https://docs.google.com/document/d/1tCw8oXTRuVTggA-0pXFQeLTJUS7qX8tlNY6RmhLRGZ4/edit#

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?

[aghassemi]

@VickG Implementation for this feature will start this month. Design is linked above.

[VickG]

that’s great thank you!

…

On Jun 19, 2018, at 10:47 AM, Ali Ghassemi ***@***.***> wrote: @VickG <https://github.com/VickG> Implementation for this feature will start this month. Design is linked above. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12079 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADf0c8YVwmlQOBAa_pB26UE59h50ey5Aks5t-TkngaJpZM4QfvGR>.

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?

[jwold]

Just wondering about a practical question, having read over the shared API design Google doc. Do we have a sense of what the actual interface would look like? Or would AMP be agnostic to that?

Some of the shared interfaces look great as a start, but from a mobile perspective there are some really great that have been built that we could pull inspiration from.

[cvializ]

Hi @jwold, could you share some examples of the mobile-oriented interfaces? The doc is representative of what the PR enables, but it's still in the initial experimental stages so we welcome any suggestions or input.

[jwold]

Happy to jump in! Please consider this an initial dive into the topic, as I just looked at some of the services I've used in the past as well as a I few things I could find with a quick search. I focused mostly on a web based signup process using different services. What I'm specifically looking for are examples where the website has done a good job of breaking down different UI components of the signup process into more digestible and more easily inputtable fields.

These three do a pretty decent job, with Netflix being the most messy. Here goes:

.
.
.

Creative Market blew me away a few years ago with how simple their signup process felt:

.
.
.

And I always enjoy a good read by checking out what User Onboard has to say about a mobile signup process.

From here it probably makes sense to actually decide how opinionated we want to be with a UI for AMP, versus keeping things more minimal.

Does this help as a starting point?

[cvializ]

Yes, thanks for sharing! These are helpful, and I'll share the experimental UI when it's available to compare

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?

[cvializ]

amp-inputmask has been launched experimentally by #18631 and this issue will be closed when it is launched into production.