DEV Community

Jason
Jason

Posted on • Originally published at blog.ijasoneverett.com on

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"
                 name="toEmail"
                 value="{!v.toEmail}"
                 required="true"/>

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"
                 name="toEmail"
                 value="{!v.toEmail}"
                 required="true"
                 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) {
     inputCmp.showHelpMessageIfInvalid();
     return validSoFar && inputCmp.get('v.validity').valid;
}, true);
if (allValid) {
    //proceed
} else {
    //display error
    component.set("v.error", 'Please update the invalid form entries and try again.');
}

Top comments (1)

Collapse
 
jaikishorgohil profile image
Jai Kishor Gohil • Edited

Anyone looking for comma seperated values just change to this -

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*$))*$"