Re: [angular.js] Email validation not working with Chrome auto complete.

2,989 views
Skip to first unread message

Suller Andras

unread,
Jun 18, 2012, 12:29:39 AM6/18/12
to ang...@googlegroups.com
I can not reproduce the issue with Iron 18 on Mac OSX.

Andras

On Mon, Jun 18, 2012 at 12:03 AM, Kyle Finley <kylef...@gmail.com> wrote:
> I'm having an issues with email validation when using tab complete on Chrome
> v19. I'm not seeing this issue with firefox, so I want to confirm this is an
> Angular issue and not a Chrome issue before filling a bug report.
>
> Here's a jsfiddle demonstrating the issue:
> http://jsfiddle.net/kylefinley/DuM6D/14/
>
> The interesting thing is that when the type of the field is changed from
> email to text the issue disappears.
> I've attached a screen shots showing the behavior.
>
> Is anyone else seeing this? Does anyone know what's going on here or have a
> solution?
>
> Thank you,
>
> Kyle
>
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/angular/-/LmVnNmn1Rm8J.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/angular?hl=en.

Vojta Jína

unread,
Jun 26, 2012, 1:22:40 AM6/26/12
to ang...@googlegroups.com
This sounds like browser bug, I guess Chrome doesnt' fire "input" event when autofill.
Although, I can't reproduce it on my Mac (many versions of Chrome/Chromium and all works fine)

V.

On Mon, Jun 18, 2012 at 9:02 AM, Kyle Finley <kylef...@gmail.com> wrote:
Andras,

Thank you for testing.

Maybe there's something different with our setups. To confirm that this wasn't caused by existing data. I delete all of the autofill data and added back one address. The issue is still present.

I'm seeing it with:

Iron Version 19.0.1100.0 (139545)
Chromium Version 21.0.1180.0 (142701)
Chrome Version 19 - 20.0.1132.34 beta

All OS X

Just to clarify the issue for anyone else who might be interest in this. The problem only presents itself on the initial autofill. If I go back and edit the email (add a space to the end for example) angular recognizes it as a valid email. It appears that angular is not re-evaluating the field after autofill, therefore, it believes the field to be invalid.

I went a head and filed an issue on the tracker. https://github.com/angular/angular.js/issues/1072 

I figured that with nearly 40% of all users using Chrome, even if only 1/2 of them experience this issue it make the email validation unusable.

Thank you,

Kyle

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/HK5zMjdW9vAJ.

michael...@sidragon.net

unread,
Sep 6, 2012, 1:05:18 PM9/6/12
to ang...@googlegroups.com
I get no event handler execution when .on is called without the specific event (using jQuery 1.8). Is this deprecated behavior or were you using another library?

On Tuesday, June 26, 2012 11:58:24 AM UTC-4, Kyle Finley wrote:
Vojta, thank you for looking into this.

I believe you are correct - Chrome is the issue here. 

When I first reported the problem I misdescribed it, I believe that's why it's difficult to reproduce. I've updated the Github issue with more information. Essentially the problem is Chrome's Autofill behavior not the tab complete. It is apparent that Chrome is using Autofill and not tab complete when the background color changes to yellow. For a user to be affected they must have saved Autofill information, therefore, the number of people affected will be smaller then I initially thought.

Currently there are two workarounds:

1. Remove method="POST" from the form - this will disable Autofill
2. Manually fire the input event: $('#myform input,#myform select').on(function() { $(this).trigger('input'); }); as described by @robrbecker on Github

Angular's documentation does not include the method="POST" attribute in the form. As long as developers follow that example their users will not be affected by this.

Thank you

- Kyle

Kyle Finley

unread,
Sep 6, 2012, 1:13:45 PM9/6/12
to ang...@googlegroups.com
I ended up removing the "POST", thereby disabling autocomplete. I can speak for workaround #2, it was posted to the issue tracker by another developer. I assumed it worked, but never tested it.  Sorry to mislead you.

- Kyle

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

michael...@sidragon.net

unread,
Sep 6, 2012, 1:20:31 PM9/6/12
to ang...@googlegroups.com
No worries! I appreciate the suggestion, and I'm just making sure I didn't miss anything. It's not that bad a solution—for now. We can pick some meaningful events (see http://stackoverflow.com/questions/6577346/jquery-bind-all-events-on-object for details) to respond to. And then timers (see http://archive.plugins.jquery.com/project/timers for one option) can be used (I know, I know).

michael...@sidragon.net

unread,
Sep 6, 2012, 1:31:05 PM9/6/12
to ang...@googlegroups.com, michael...@sidragon.net
As horrible as this may be, it may be a reliable solution. (For context, I have the log in form raised in a Twitter Bootstrap modal identified as loginModal.)

var monitorId

$('#loginModal').on('show', function() {
  monitorId = window.setInterval(function() {
    $('#loginModal input').trigger('input')
  }, 1000)
})

$('#loginModal').on('hide', function() {
  window.clearInterval(monitorId)
})

Augment as necessary to fire triggers on other input elements.

(Afraid I'll read this post some day and feel embarrassed I ever published such a hack.)

Kyle Finley

unread,
Sep 6, 2012, 1:44:52 PM9/6/12
to ang...@googlegroups.com
Thanks you, it's good to have an alternative. I can see how AutoFill can be an important feature for User.  Considering Angular's strength with Crud type applications, a native solution would be quite welcome.

michael...@sidragon.net

unread,
Sep 6, 2012, 1:48:00 PM9/6/12
to ang...@googlegroups.com
No problem. Despite its inefficiency, this is probably the most general and reliable way to go. And, regrettably, I can't imagine any clean solution to this. Browsers have simply got to be good citizens fire an event when they change form values. (We can't even argue this is for security reasons as those values are clearly accessible after auto-fill completes.)

Scott Motte

unread,
Nov 13, 2012, 9:02:05 PM11/13/12
to ang...@googlegroups.com
Thanks for this post. I ran into the same issue. 

I adapted Michael's solution to fire just before a submit (which was all I needed it for since it was just a login form)

The pieces of code for anyone else (coffeescript)

  $scope.login = ->
    $scope.autoFillHack()

  $scope.autoFillHack = ->
    $("input").trigger('input')
Reply all
Reply to author
Forward
0 new messages