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