Chrome's email fields

Sunday 20 June 2010

In a comment on my last post, drozzy wrote:

PS: Whenever I try to post a comment on your blog, my email always gets @ and . replaced by (at) and (dot) symbols, so that I have to retype it before clicking on "add it" button. This is a bug methinks. Fyi I am using chrome.

I tried it, and sure enough, Chrome would not let a comment be submitted.

Somewhere in the reptilian brain of my comment code, I was cloaking email addresses by changing "." to "(dot)" and "@" to "(at)". This meant that when previewing a comment, the valid email that you had entered now is not a valid email address.

This is fine, except in Chrome. A couple of months ago, I changed the comment form's field to use an HTML5 type="email" field. I figured it wouldn't hurt anything, and would give iPhone users a nicer email-specific keyboard to use.

But it turns out Chrome is being even more "helpful": it won't let a form submit if an email field has an invalid email address in it. And "ned(at)nedbatchelder(dot)com" is not a valid email address, no matter how obvious it is to us humans what is meant.

I couldn't remember why I wanted to cloak email addresses like that in the first place, since they aren't displayed on the site anyway, and even if they were, it should be output like that, not input like that. So I removed the cloaking, and Chrome is working again.

Playing with Chrome a bit, it seems that they're using the same ultra-liberal validation I recommended in Humane email validation: stuff, at, stuff, dot, stuff, where stuff can't have at-signs or spaces in it, although they don't trim the string first, so a leading or trailing space will prevent the form submission. I'm a bit surprised that they unilaterally perform this validation, since there's no UI to let the user know what's going on: the field is given focus, but there's no other indication as to why the form didn't work.

It seems browser incompatibilities are inevitable. This is a big difference between the way the browsers work. And one of the key theories of HTML5 email fields is that they don't break anything, just make it nicer. Mark Pilgrim closes his exhortation on HTML5 email fields with:

To sum up: there’s no downside to converting all your email address form fields to type="email" immediately. Virtually no one will even notice, except iPhone users, who probably won’t notice either. But the ones who do notice will smile quietly and thank you for making their web experience just a little easier.

Seems to me like someone noticed...

One more thing: I considered digging into the Chromium source to find the validation to see what the real rule was, and whether it could be disabled or controlled in some way, but the Chrome project uses all custom tools, and even just pulling the source from svn indicates the use of gclient, whatever that is. Too much trouble.


Mounir Lamouri 9:43 AM on 21 Jun 2010

The email validation code used by Chrome is probably the one from webkit. You can found that in WebCore/html/ValidityState.cpp, line 39:
static const char emailPattern[] =
"[a-z0-9!#$%&'*+/=?^_`{|}~.-]+" // local part
"[a-z0-9-]+(\\.[a-z0-9-]+)+"; // domain part

Alan Green 11:35 AM on 22 Jun 2010

huh. Looks like chromium uses a mixture of svn and git, and gclient is a tool for managing that mess. AFAICT, Chromium has both svn and git repositories, while Webkit uses just svn.

One way to search and browse the source is using with package set to "(|(".

Here's a search that zeroes in on code relevant to input fields with type=email:|(

That said, the code for ValidityState.cpp seems to have moved on quite a bit since it looked like the snippet Mounir posted above. I honestly cannot work out where the email validation pattern is in the latest source. Perhaps the over-zealous validation has been removed already.

And yes, I had to start Firefox just to submit this comment :)

Ned Batchelder 12:27 PM on 22 Jun 2010

@Alan, thanks for digging into the code (and the pointer to Google Code Search!). You should be able to submit comments with Chrome here now, I've removed the offensive fiddling of the email address. Or I thought I had...

Ned Batchelder 12:31 PM on 22 Jun 2010

I should be clearer: if you've written a comment here before, you'll have a stored email value with (at) and (dot). You'll have to edit that once to make it right. After that, there should be no issues with Chrome any more.

John Lenton 7:59 AM on 23 Jun 2010

You can make it more obvious by using the :invalid selector in css. Check it out:

Add a comment:

Ignore this:
not displayed and no spam.
Leave this empty:
not searched.
Name and either email or www are required.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.