Validate Multiple Email Addresses with HTML5

Question

I'm trying to construct an email form that takes multiple comma separated emails as an input and verifies them using HTML5. I want to use the following regex to sanity check the input:

\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b

Here's what I've tried

This doesn't seem to work for more than one:

<input type="email" pattern="\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b" value="" multiple>

This works, but only does the built in email validation, which seems to be something like .+@.+.

<input type="email" value="" multiple>

Is there a way to mix pattern and multiple so the regex checks each item in the comma separated list?

I have a demo here: http://codepen.io/ben336/pen/ihjKA

Answer 1

Try this:

<input type="email" multiple pattern="^([\w+-.%]+@[\w-.]+\.[A-Za-z]{2,4},*[\W]*)+$" value="">

Update:

Using <input type="email" value="" multiple> does seem to be bugged by letting "a@b" pass. Though I would go with this method to keep the semantics as you said, and simply use validation on the server side as well just in case someone tries to submit an email like "a@b".

Just as a note, you should always validate on the server side for security reasons anyway, as client side validation can be bypassed very easily.