Adds tel input type validation

[wmill]

Request Type: feature

How to reproduce:

Component(s): forms

Impact: medium

Complexity: small

This issue is related to:

Detailed Description:

This adds default validation to elements.

Other Comments:

The 'tel' input gives you a phone keyboard on mobile, but it'd be handy to have some validation for desktop users.

[mary-poppins]

Thanks for the PR! Please check the items below to help us merge this faster. See the contributing docs for more information.

• Uses the issue template (#7315)

If you need to make changes to your pull request, you can update the commit with git commit --amend.
Then, update the pull request with git push -f.

Thanks again for your help!

[caitp]

This is another one of those things which will probably drive us crazy because of the absolutely idiotic html5 constraint validation rules in the spec, if not now, then later.

I expect we probably only get a type mismatch error in modern browsers right now, if anything at all, so this is probably okay. But down the line it might be significantly less okay.

This isn't necessarily something to worry about now, and TBH I would say just ship it. However, I think this needs an LGTM from another core team member first.

[caitp]

So, this will get an LGTM from me on the condition that you write some tests which are passing in all of the supported browsers, and if it gets an LGTM from another core team member then I think we can probably merge this.

I can't guarantee that it will be merged, but the directive itself is pretty tiny so that's a good sign, and I think it will be useful for backwards compat with legacy browsers.

That said, if it doesn't land, we might be able to do this in a third party module, and it will be easier after form validation gets restructured.

[mary-poppins]

I'm sorry, but I wasn't able to verify your Contributor License Agreement (CLA) signature. CLA signature is required for any code contributions to AngularJS.

Please sign our CLA and ensure that the CLA signature email address and the email address in this PR's commits match.

If you signed the CLA as a corporation, please let us know the company's name.

Thanks a bunch!

PS: If you signed the CLA in the past then most likely the email addresses don't match. Please sign the CLA again or update the email address in the commit of this PR.
PS2: If you are a Googler, please sign the CLA as well to simplify the CLA verification process.

[mary-poppins]

CLA signature verified! Thank you!

Someone from the team will now triage your PR and it will be processed based on the determined priority (doc updates and fixes with tests are prioritized over other changes).

[MonikaMahanthappa]

What is the update on this PR. When will this be available?

[IgorMinar]

"ext-" as part of the character class? that doesn't look right.

is there some precedence for making this a regular expression that is acceptable across all locales? localization of this stuff is usually pretty tricky and we can't have US only solution. :-/

[wmill]

It's to allow extensions, eg 'x 2345' or 'ext 2342'.
'-' is allowed for obvious reasons.. 555-1234

I haven't been able to find any standard way of doing it, but this should
hold up well under i18n. It's the closest thing to a standard I could find.

Thinking this over, I'm not actually sure if this is the best way to do it.
An ng-pattern on each input also works.

-Walter

On Mon, May 19, 2014 at 3:18 PM, Igor Minar [email protected]:

In src/ng/directive/input.js:

@@ -16,6 +16,7 @@ var DATETIMELOCAL_REGEXP = /^(\d{4})-(\d\d)-(\d\d)T(\d\d):(\d\d)$/;
var WEEK_REGEXP = /^(\d{4})-W(\d\d)$/;
var MONTH_REGEXP = /^(\d{4})-(\d\d)$/;
var TIME_REGEXP = /^(\d\d):(\d\d)$/;
+var TEL_REGEXP = /^[0-9+()#.\s/ext-]+$/;

"ext-" as part of the character class? that doesn't look right.

is there some precedence for making this a regular expression that is
acceptable across all locales? localization of this stuff is usually pretty
tricky and we can't have US only solution. :-/

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/7315/files#r12811211
.

[michaelkrog]

The only way of supporting validation for international phone numbers must be to know the validation rules for each country. In can be just the syntax, but it could also go as far as number ranges.

I created an angular directive for it based on a datafile taken directly from Google libphonenumber. It takes both syntax and number ranges into account.

A demo is available here: http://michaelkrog.github.io/tel.js/

Biggest problem is that the datafile is 183kbytes(uncompressed).

[jimmywarting]

Cool stuff @michaelkrog

[lgalfaso]

Given that there is no way that the core will have all the possible variations, and that there is a good library that supports all the international variations (http://michaelkrog.github.io/tel.js/) I am going to close this as a wont fix