Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have a form where I ask for email addresses. Usually I'd use

<input type="email" ...>

but I want to allow a user to type foo rather than foo@mycompany.com in the (likely) case that they are using an @mycompany.com email address. Is there a way to get around the validation (if format matches this regex, accept; otherwise, validate normally), or should I just use

<input type="text" ...>

and ignore the semantics and so forth?

share|improve this question
add comment

3 Answers

up vote 5 down vote accepted

If you're going to allow content that isn't in a valid email address format then you'll want to use <input type="text" ...> like you said. Although someone may enter a whole email address, it isn't exclusive to that field so using <input type="email" ...> would not be appropriate.

You can also turn off form validation if you don't want the browser to validate those fields for you. But that kind of defeats the purpose of using HTML5 features.

share|improve this answer
    
Sounds good, just making sure I'm doing the right thing. –  Charles Jun 22 '11 at 13:47
    
Wait... what do you think about having the form autocomplete the email address and using type="email"? –  Charles Jun 22 '11 at 13:48
    
In that case I would use <input type="email" ...> since the final content of that field will be a valid email address. –  John Conde Jun 22 '11 at 13:48
    
OK, it's coded and working nicely. If they have Javascript turned off but have an HTML5 browser they'll have to complete the email on their own, but that's really not too bad of a corner case. –  Charles Jun 22 '11 at 14:14
add comment

HTML5 allows pattern="" attribute to be specified :

Specifies a regular expression against which a UA is meant to check the value of the control represented by its element.

A regular expression that must match the JavaScript Pattern production as specified in [ECMA 262].

Examples:

<input type="email" pattern="[^ @]*@[^ @]*" value="">

<input type="email" id="email" name="email" placeholder="Enter your email address" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$">

But I would use type="text" to be on a safer side -- in this case you can validate ANY user input.

share|improve this answer
    
+1 for beating me to it by 36 seconds! –  Nick Jun 22 '11 at 13:55
    
-1 for providing a regex that rejects valid email addresses - linuxjournal.com/article/9585 - ex-parrot.com/pdw/Mail-RFC822-Address.html –  dmsnell Jun 22 '11 at 20:17
    
@dmsnell This example was taken from a webpage and not written by myself. I'm guilty for not checking it... but, on another had, this question is not about "how to properly validate email address on client side". In general, not to use pattern at all will be a better idea (why duplicate the functionality (pattern) if it is already provided by browser), unless there are specific requirements. –  LazyOne Jun 22 '11 at 20:25
    
@dmsnell: OF course the general RFC 5322 specification is not even regular, so a true regular expression can never parse it. It's at least Dyck-complete, so even backreferences aren't enough (though I think there's a Perl construct that would allow such parsing). So any pattern will have to either accept an invalid email address or reject a valid one. –  Charles Jun 23 '11 at 5:07
1  
@dmsnell I absolutely agree with you. When I started to work at my current job they gave me very short email address (it supposed to be temporal address, but I was using it for nearly 2 years) -- a@mycompany.com (yep, just one letter before @). When I tried to register on some sites (forums, product support etc) it was rejected as invalid quite few times. In the end, they created me an alias (like andriy@mycompany.com) so I could use it instead. I'm still using both of them -- depending on situation. –  LazyOne Jun 23 '11 at 11:37
show 1 more comment

You can use the new HTML5 pattern attribute to specify valid formats for an input field using a JavaScript regexp, then put the error message in the title attribute:

<input type="email" pattern="([regexp])" title="Your error message" />

However, in the scenario you describe, there's not much advantage of doing it this way over using type="text" except for the fact that Mobile Safari users will see an email keyboard instead of the full qwerty one.

As such, you might consider making it a requirement to use a company address, appending that in plain text after the text field, and prompting users for the first part of the email address rather than the full version.

share|improve this answer
    
pattern is ignored in Firefox with type="email" in my tests. –  Charles Jun 22 '11 at 13:59
    
@Charles Best to use type="text" then, or simply require that they type their full email address including your company domain; the latter is what I'd do. –  Nick Jun 22 '11 at 14:12
    
At the moment I've made it type="email" and added a bit of JavaScript to complete email addresses that (otherwise) look like mycompany email addresses. But thanks for the input, you have my +1 already. –  Charles Jun 22 '11 at 14:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.