Hello Friends, In this tutorial, we will know that how to add custom email field validation in Salesforce Lighting Component using client side(javascript) controller. I am using JavaScript Email address Regular Expression, that helps you to implement this functionality in your Lightning component.

After completing this tutorial, you’ll able to:
  • Implement Email field validation in Lightning component.
So let's begin,

Email Field Validation

Step 1: Login to your Salesforce Org. and open developer console.


Step 2: Go to File>New>Lightning Component and create a Lightning Component called EmailFieldValidation. Replace the following markup in the Lightning Component. 

 EmailFieldValidation.cmp
 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <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="txtEmail" label="Email"  placeholder="Email-Address" class="slds-input"/>
                </div>
            </div>            
            <lightning:button variant="success" label="Validate Email" title="Validate Email" onclick="{!c.ValidateEmail}"/>                       
        </div>
    </div>  
 </aura:component>
EmailFieldValidationController.js 
 ({
    ValidateEmail : function(component, event, helper) {  
        var emailField = component.find("txtEmail");
        var emailFieldValue = emailField.get("v.value");
        // Store Regular Expression
        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.          
        if(!$A.util.isEmpty(emailFieldValue)){   
            if(emailFieldValue.match(regExpEmailformat)){
                emailField.set("v.errors", [{message: null}]);
                $A.util.removeClass(emailField, 'slds-has-error');                
            }else{
                $A.util.addClass(emailField, 'slds-has-error');
                emailField.set("v.errors", [{message: "Please Enter a Valid Email Address"}]);               
            }
        } 
    },
 })
Step 3: Go to File>New>Lightning Application and create a Lightning Application called Preview. Replace the following markup in the Lightning Application and click on the preview button.

 Preview.app
 <aura:application extends="force:slds"> 
    <c:EmailFieldValidation/>
 </aura:application>
Output:

 See also:
Conclusion:
Hope you like this tutorial, for any query or suggestions please feel free to comment.
Thank you.