Lightning Component email validation

Custom Email Field Validation in Salesforce Lightning Component

Lightning Component

Sharing is caring!

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_information@domain.
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@“]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[09]{1,3}\.[09]{1,3}\.[09]{1,3}\.[09]{1,3}])|(([azAZ\09]+\.)+[azAZ]{2,}))$/

Valid Email Addresses Samples
  • goodandsimple@test.com
  • very.common@test.com
  • disposable.style.email.with+symbol@test.com
  • other.email-with-dash@test.com
  • x@test.com (one-letter local-part)
  • test-indeed@strange-test.com
  • #!$%&’*+-/=?^_`{}|~@test.org
  • test@s.solutions
Invalid Email Addresses Samples
  • Abc.test.com (no @ character)
  • A@b@c@test.com (only one @ is allowed outside quotation marks)
  • a”b(c)d,e:f;g<h>i[j\k]l@test.com (none of the special characters in this local-part are allowed outside quotation marks)
  • this is”not\allowed@test.com (spaces, quotes, and backslashes may only exist when within quoted strings and preceded by a backslash)
  • this\ still\”not\\allowed@test.com (even if escaped (preceded by a backslash), spaces, quotes, and backslashes must still be contained by quotes)
  • piyush..soni@test.com (double dot before @)
  • piyush.soni@test..com (double dot after @)

Email Field Validation image gif Lightning Component

Lightning Component Code [EmailValidation.cmp] 

 JavaScript Controller Code [EmailValidationController.js]

  • See code Comments 🙂
TestApp.app

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 🙂

Sharing is caring!

(Visited 3,867 times, 4 visits today)

One thought on “Custom Email Field Validation in Salesforce Lightning Component

Leave a Reply