Form Validation in Lightning Component Salesforce | how to display error message below input field in lightning component Salesforce

Today I am working on how to validate form in lightning component salesforce.

➡ To know more details about Form Validation in Lightning Component , Click Here.

formValidationCmp.cmp [Lightning Component]

   <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    
    
    <div class="slds">
        <div class="slds-grid slds-wrap">
            <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">
                <div class="slds-form-element">
                    <label class="slds-form-element__label">Name</label>
                    <div class="slds-form-element__controller">
                        <ui:inputText class="slds-input" value="" aura:id="userName"/>
                    </div>
                </div>
            </div>
            
        </div>
        
        <div class="slds-grid slds-wrap">
            <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">
                <div class="slds-form-element">
                    <label class="slds-form-element__label">Email</label>
                    <div class="slds-form-element__controller">
                        <ui:inputEmail class="slds-input" value="" aura:id="userEmail"/>
                    </div>
                </div>
            </div>
            
        </div>
        
        <div class="slds-grid slds-wrap">
            <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">
                <div class="slds-form-element">
                    <label class="slds-form-element__label">Phone</label>
                    <div class="slds-form-element__controller">
                        <ui:inputPhone class="slds-input" value="" aura:id="userPhone"/>
                    </div>
                </div>
            </div>
            
        </div>
        
        <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">
            <div class="slds-form-element">
                <label class="slds-form-element__label">State</label>
                <div class="slds-form-element__controller">
                    <ui:inputSelect class="slds-select" aura:id="userState" value="">
                        <ui:inputSelectOption text="--None--"/>
                        <ui:inputSelectOption text="Delhi"/>
                        <ui:inputSelectOption text="Haryana"/>
                        <ui:inputSelectOption text="Karnataka"/>
                    </ui:inputSelect>
                </div>
            </div>
        </div>
        
        <div class="slds-form--inline slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">
            <div class="slds-form-element" aura:id="redCheck">
                <div class="slds-form-element__control">
                    <div class="slds-checkbox">                      
                        <input type="checkbox" name="options" aura:id="checkbox1" id="checkbox1" value="" />
                        <label class="slds-checkbox__label" for="checkbox1">
                            <span class="slds-checkbox_faux"></span>
                            <span class="slds-form-element__label">Red</span>
                        </label>
                    </div>
                </div>                  
            </div>
            
            <div class="slds-form-element" aura:id="greenCheck">
                <div class="slds-form-element__control">
                    <div class="slds-checkbox">                      
                        <input type="checkbox" name="options" aura:id="checkbox2" id="checkbox2" value=""  />
                        <label class="slds-checkbox__label" for="checkbox2">
                            <span class="slds-checkbox_faux"></span>
                            <span class="slds-form-element__label">Green</span>
                        </label>
                    </div>
                </div>                  
            </div>
            
        </div>
        
        
        <div class="slds-form--inline slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <span class="slds-radio">
                      <input type="radio" id="radio1" value="" name="default" checked="" />
                      <label class="slds-radio__label" for="radio1">
                        <span class="slds-radio_faux"></span>
                        <span class="slds-form-element__label">Radio Label One</span>
                      </label>
                    </span>                    
                  </div>
            </div>
            
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <span class="slds-radio">
                      <input type="radio" id="radio2" value="radio-43" name="default" checked="" />
                      <label class="slds-radio__label" for="radio2">
                        <span class="slds-radio_faux"></span>
                        <span class="slds-form-element__label">Radio Label Two</span>
                      </label>
                    </span>                    
                  </div>
            </div>
            
        </div>
        
       <div class="slds-form--inline slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium"> 
        <div class="slds-text-align--center slds-m-top--medium">
            <button class="slds-button slds-button--brand" onclick="{!c.submitScoreAction}">Submit</button>
        </div>
        </div> 
        <br/>
        
        
    </div>
    
</aura:component>

formValidationCmpController.js [JavaScript File]

    ({
	submitScoreAction : function(component, event, helper) {
        var isValidate = true;
        
        var userName = component.find('userName');
        var userEmail = component.find('userEmail');
        var userPhone = component.find('userPhone');
        var userState = component.find('userState');
        
        
        var userNameVal = component.find('userName').get('v.value');        
        var userEmailVal = component.find('userEmail').get('v.value');
        var userPhoneVal = component.find('userPhone').get('v.value');
        var userStateVal = component.find('userState').get('v.value');
        
        
        
        
        if($A.util.isUndefinedOrNull(userNameVal) || $A.util.isUndefined(userNameVal) || $A.util.isEmpty(userNameVal)){
            userName.set("v.errors",[{message:'Name is required'}]);
            isValidate = false;
        }else{
            userName.set("v.errors",null);
        }        
        
        
        if($A.util.isUndefinedOrNull(userEmailVal) || $A.util.isUndefined(userEmailVal) || $A.util.isEmpty(userEmailVal)){
            userEmail.set("v.errors",[{message:'Email is required'}]);
            isValidate = false;
        }else{
            userEmail.set("v.errors",null);
        }
        
        
        if($A.util.isUndefinedOrNull(userPhoneVal) || $A.util.isUndefined(userPhoneVal) || $A.util.isEmpty(userPhoneVal)){
            userPhone.set("v.errors",[{message:'Phone is required'}]);
            isValidate = false;
        }else{
            userPhone.set("v.errors",null);
        }
        
        if(userStateVal == '--None--'){
            userState.set("v.errors",[{message:'Please select state option'}]);
            isValidate = false;
        }else{
            userState.set("v.errors",null);
        }
        
        if(isValidate){
            //alert('Form submitted successfully');
           
            var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    "title":"Success",
                    "type":"success",
                    "message":"Form submitted successfully.",                        
                });
                toastEvent.fire();
             
            $A.get('e.force:refreshView').fire();
        }
        
		
	},
    
    
})

formValidationCmp.css [Style CSS File]

➡ To know more live demo source code in Salesforce lightning, Trigger, Visualforce & LWC, Use this link..