Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

amp-form: Support auto formatting #12079

Closed
aghassemi opened this issue Nov 15, 2017 · 21 comments
Closed

amp-form: Support auto formatting #12079

aghassemi opened this issue Nov 15, 2017 · 21 comments

Comments

@aghassemi
Copy link
Contributor

@aghassemi aghassemi commented Nov 15, 2017

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
Copy link
Contributor

@cvializ cvializ commented Nov 15, 2017

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

@choumx
Copy link
Contributor

@choumx choumx commented Nov 16, 2017

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

@lswang1618
Copy link

@lswang1618 lswang1618 commented Nov 16, 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)

@ampprojectbot
Copy link
Member

@ampprojectbot ampprojectbot commented Dec 4, 2017

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

@lswang1618
Copy link

@lswang1618 lswang1618 commented Dec 4, 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

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

@ampproject ampproject deleted a comment from ampprojectbot Jan 4, 2018
@ericlindley-g ericlindley-g added this to Needs Triage in UI Jan 4, 2018
@ericlindley-g ericlindley-g moved this from Needs Triage to E-comm in UI Jan 8, 2018
@ampprojectbot
Copy link
Member

@ampprojectbot ampprojectbot commented Jan 22, 2018

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

1 similar comment
@ampprojectbot
Copy link
Member

@ampprojectbot ampprojectbot commented Feb 12, 2018

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

@ampprojectbot
Copy link
Member

@ampprojectbot ampprojectbot commented Jun 5, 2018

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

@aghassemi
Copy link
Contributor Author

@aghassemi aghassemi commented Jun 19, 2018

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

@VickG
Copy link

@VickG VickG commented Jun 19, 2018

@ampprojectbot
Copy link
Member

@ampprojectbot ampprojectbot commented Sep 11, 2018

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

@jwold
Copy link

@jwold jwold commented Oct 10, 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.

@cvializ
Copy link
Contributor

@cvializ cvializ commented Oct 10, 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.

@jwold
Copy link

@jwold jwold commented Oct 10, 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:

signups

.
.
.

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

group 3

.
.
.

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
Copy link
Contributor

@cvializ cvializ commented Oct 10, 2018

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

@ampprojectbot
Copy link
Member

@ampprojectbot ampprojectbot commented Nov 8, 2018

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

@cvializ
Copy link
Contributor

@cvializ cvializ commented Nov 8, 2018

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

@ampprojectbot
Copy link
Member

@ampprojectbot ampprojectbot commented Nov 28, 2018

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

1 similar comment
@ampprojectbot
Copy link
Member

@ampprojectbot ampprojectbot commented Jan 9, 2019

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

@aghassemi
Copy link
Contributor Author

@aghassemi aghassemi commented Jan 29, 2019

Launched as #14745

@aghassemi aghassemi closed this Jan 29, 2019
@aghassemi aghassemi added this to Done in UI Triage via automation Jan 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
UI
  
E-comm
UI Triage
  
Done
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants