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: 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
Invalid Email Addresses Samples
  • Abc.test.com (no @ character)
  • A@b@[email protected] (only one @ is allowed outside quotation marks)
  • a”b(c)d,e:f;g<h>i[j\k][email protected] (none of the special characters in this local-part are allowed outside quotation marks)
  • this is”not\[email protected] (spaces, quotes, and backslashes may only exist when within quoted strings and preceded by a backslash)
  • this\ still\”not\\[email protected] (even if escaped (preceded by a backslash), spaces, quotes, and backslashes must still be contained by quotes)
  • [email protected] (double dot before @)
  • [email protected] (double dot after @)

Email Field Validation image gif Lightning Component

Lightning Component Code [EmailValidation.cmp] 
<aura:component >
<aura:attribute name="oLead" type="Lead" default="{ 'sobjectType': 'Lead' }"/>

<div class="slds-m-around--xx-large">
	<div class="slds-form--stacked">
   		<div class="slds-form-element">  
    		<div class="slds-form-element__control">
     		 <ui:inputText aura:id="leadEMail" label="Email" value="{!v.oLead.Email}" placeholder="[email protected]..." class="slds-input"/>
    		</div>
  		</div>
        <div class="slds-m-around--medium">
          <button class="slds-button slds-button--brand" onclick="{!c.validateEmail}">Validate Email</button>
        </div>
	</div>
</div>  
</aura:component>
 JavaScript Controller Code [EmailValidationController.js]
({
	validateEmail : function(component, event, helper) {
		var isValidEmail = true; 
        var emailField = component.find("leadEMail");
        var emailFieldValue = emailField.get("v.value");
        // Store Regular Expression That 99.99% Works. [ http://emailregex.com/] 
        var regExpEmailformat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;  
        // check if Email field in not blank,
        // and if Email field value is valid then set error message to null, 
        // and remove error CSS class.
        // ELSE if Email field value is invalid then add Error Style Css Class.
        // and set the error Message.  
        // and set isValidEmail boolean flag value to false.
        
        if(!$A.util.isEmpty(emailFieldValue)){   
            if(emailFieldValue.match(regExpEmailformat)){
			  emailField.set("v.errors", [{message: null}]);
              $A.util.removeClass(emailField, 'slds-has-error');
              isValidEmail = true;
        }else{
             $A.util.addClass(emailField, 'slds-has-error');
             emailField.set("v.errors", [{message: "Please Enter a Valid Email Address"}]);
             isValidEmail = false;
        }
       }
        
     // if Email Address is valid then execute code     
       if(isValidEmail){
         // code write here..if Email Address is valid. 
       }
	},
})
  • See code Comments 🙂
TestApp.app
<aura:application extends="force:slds">
    <c:EmailValidation/>
<!-- here c: is org. namespace prefix-->
</aura:application>

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 🙂

6 comments

Leave a Reply