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

Open
aghassemi opened this Issue Nov 15, 2017 · 18 comments

Comments

@aghassemi
Member

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Collaborator

choumx commented Nov 16, 2017

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

@lswang1618

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Collaborator

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?

@cvializ

This comment has been minimized.

@ampprojectbot

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Member

aghassemi commented Jun 19, 2018

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

@VickG

This comment has been minimized.

VickG commented Jun 19, 2018

@ampprojectbot

This comment has been minimized.

Collaborator

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

This comment has been minimized.

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment