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?


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.

  • 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

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].


<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.

  • -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
  • @LazyOne: I know this question isn't about how to properly validate email addresses, but my comment was about improperly rejecting valid input. The given pattern would have even rejected some valid @mycompany.com email addresses. It's pretty frustrating to enter your email address on a form and have it come back and tell you that it's invalid. – dmsnell Jun 23 '11 at 11:27
  • 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

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.

  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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