Lightning Component email validation

Custom Email Field Validation in Salesforce Lightning Component

Uncategorized

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] 
<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 = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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