Lightning Component email validation

Custom Email Field Validation in Salesforce Lightning Component

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: [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 🙂


  • 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

  • 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:

  • Cannot read property ‘valid’ of undefined.  I get this error for – (return validSoFar && inputCmp.get(‘v.validity’).valid;)

    I am using the lightning:editRecordForm




Leave a Reply