Amphtml: amp-form: Support auto formatting
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
aghassemi
All 21 comments
This has been on my mind too, I think it is a great idea to prioritize this for e-commerce.
cvializ
on 16 Nov 2017
@lswang1618 was interested in this for credit card fields in amp-payment IIRC. /cc @cathyxz
choumx
on 16 Nov 2017
+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)
lswang1618
on 16 Nov 2017
This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?
ampprojectbot
on 4 Dec 2017
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?
lswang1618
on 4 Dec 2017
This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?
ampprojectbot
on 22 Jan 2018
This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?
ampprojectbot
on 12 Feb 2018
Link to design doc https://docs.google.com/document/d/1tCw8oXTRuVTggA-0pXFQeLTJUS7qX8tlNY6RmhLRGZ4/edit#
cvializ
on 30 Apr 2018
This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?
ampprojectbot
on 5 Jun 2018
@vickG Implementation for this feature will start this month. Design is linked above.
aghassemi
on 19 Jun 2018
that’s great thank you!
On Jun 19, 2018, at 10:47 AM, Ali Ghassemi notifications@github.com 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 https://github.com/ampproject/amphtml/issues/12079#issuecomment-398486160, or mute the thread https://github.com/notifications/unsubscribe-auth/ADf0c8YVwmlQOBAa_pB26UE59h50ey5Aks5t-TkngaJpZM4QfvGR.
VickG
on 19 Jun 2018
This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?
ampprojectbot
on 11 Sep 2018
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.
jwold
on 10 Oct 2018
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.
cvializ
on 10 Oct 2018
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?
jwold
on 10 Oct 2018
Yes, thanks for sharing! These are helpful, and I'll share the experimental UI when it's available to compare
cvializ
on 10 Oct 2018
This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?
ampprojectbot
on 8 Nov 2018
amp-inputmask has been launched experimentally by #18631 and this issue will be closed when it is launched into production.
cvializ
on 8 Nov 2018
This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?
ampprojectbot
on 28 Nov 2018
This is a high priority issue but it hasn't been updated in awhile. @cvializ Do you have any updates?
ampprojectbot
on 9 Jan 2019
Launched as #14745
aghassemi
on 29 Jan 2019
Related issues
westonruter
·
3Comments
gmajoulet
·
3Comments
mrjoro
·
3Comments
radiovisual
·
3Comments
aghassemi
·
3Comments