Custom Email Field Validation in Salesforce Lightning Component

Hi Ohana,
Today’s, In This Sample Example We will know that how to Add Custom Email Field Validation in Salesforce Lightning Component with Client Side(java Script) controller.

Basically email address is a string (a subset of different ASCII characters) which is divided into 2 parts by @ symbol. a “special_information” and a domain, such as: special_informatio[email protected].
The length of the special_information part may be up to 64 characters long and the domain name may be up to 253 characters.

I am using javaScript Email Address Regular Expression, That 99.99% Works -:

/^(([^<>()\[\]\\.,;:\s@“]+(\.[^<>()\[\]\\.,;:\[email protected]]+)*)|(“.+”))@((\[[09]{1,3}\.[09]{1,3}\.[09]{1,3}\.[09]{1,3}])|(([azAZ\09]+\.)+[azAZ]{2,}))$/

Valid Email Addresses Samples
Invalid Email Addresses Samples

Email Field Validation image gif Lightning Component

Lightning Component Code [EmailValidation.cmp] 

 JavaScript Controller Code [EmailValidationController.js]

  • See code Comments 🙂

After the winter 17 release you can  use the Lightning Design System style in Lightning Apps by extends=”fore:slds”.  The Salesforce Lightning Design System provides a look & feel that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom applications a UI that is consistent with Salesforce.

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box 🙂

(Visited 16,262 times, 1 visits today)

7 thoughts on “Custom Email Field Validation in Salesforce Lightning Component”

  1. I couldnt make this code work. It is throwing error “emailFieldValue.match(regExpEmailformat)” at compile time itself. Also, couldn’t use the regular expression provided as pattern to lightning:input

  2. You can use the Lightning:input attribute pattern to make sure values are valid now. With my example, I used a custom label to hold the pattern because some of the characters were causing issues just being pasted into my aura component.

    In the other snippet you can see how to validate on the javascript controller side too.

    Salesforce posted some regex’s for emails, which is what I used in my custom label:

  3. Hi, I am using the above mentioned Email Validation. but i am getting the following error and i have no idea how to debug it.

    This page has an error. You might just need to refresh it. Action failed: c:ResourceBookingCmp$controller$validateEmail [Cannot read property ‘config’ of undefined] Failing descriptor: {c:ResourceBookingCmp$controller$validateEmail}


Leave a Comment