Allow Multiple Email Addresses in a Lightning Input Component

The lightning input component has built in support for emails which works great when you need to accept an email address as input.

<lightning:input aura:id="emailForm" label="To: " type="email"

This auto validates the input to ensure its in the correct format. The moment you add a semi-colon to add multiple emails, the validation fails. It only allows for one email input. To get around this you can’t use the email type. You have to use the text type and do the validation yourself using a regular expression like:

<lightning:input aura:id="emailForm" label="To: " type="text"
                 messageWhenPatternMismatch="Please enter a valid email or valid emails separated by a semi-colon"
                 pattern="^(([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)(\s*;\s*|\s*$))*$" />

With the snippet above, you can now accept multiple emails in a single input control. It’ll correctly validate whether you use a single email or multiple emails. If you can improve the regular expression, leave a comment below.

Controller validation
You can further validate the input in your controller with this snippet:

var allValid = component.find('emailForm').reduce(function (validSoFar, inputCmp) {
     return validSoFar && inputCmp.get('v.validity').valid;
}, true);
if (allValid) {
} else {
    //display error
    component.set("v.error", 'Please update the invalid form entries and try again.');

No Comments

You can leave the first : )

Leave a Reply

Your email address will not be published. Required fields are marked *

Please Do the Math      

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: