Working with custom validations using lightning:input

Handling Custom Validations using <lightning:input>

Hey guys, this post is dedicated to <lightning:input>. Most common issues that we deal while using <lightning:input> is handling custom validation in most efficient way. Although Salesforce does provide some of the validation inbuilt with lightning:input tag but still in project environment we usually come across totally different ball game. So it is important to understand when we should go for ui:input and when to go for lightning:input.

Here we will look for handling custom validations using lightning:input tag. So lets gets started !!!!

First thing first, here I have created a simple lightning component with 2 input fields using today's 

showstopper i.e. <lightning:input>.

<aura:component controller="ContactController">

        <aura:attribute name="obj" type="ContactController.ObjectWrapper[]" />

<aura:handler name="change" value="{!v.obj}" action="{!c.check}"/>

<div style="padding:50;">

    <lightning:input name="cname"

                         label="Customer Name"

                         required="true"

                         aura:id="cname"

                         value="{!v.obj.customerName}"

                         messageWhenValueMissing="Enter Customer Name"

                         messageWhenBadInput="Incorrect Name"/>

        <lightning:input name="lamt"

                         label="Load Amount"

                         type="number"

                         aura:id="lamt"

                         min="1000"

                         max="50000"

                         messageWhenRangeOverflow="Loan cannot be given above 50,000"

                         messageWhenRangeUnderflow="Cannot apply for less than 1,000"

                         messageWhenBadInput="You must say foo"

                         formatter="currency"

                         value="{!v.obj.amount}"/> <br/>

        <div class="slds-align--absolute-center">

            <lightning:button label="Apply" 

                              aura:id="bt"

                              variant="brand"

                              onclick="{!c.check}"/>

         </div>

       </div>

</aura:component>

As per the requirement we have to validate both the input fields for custom validations as, 

• Customer name should not be equal to Test.
• Salary of the customer should not equal to 1500.

Although these are some absurd validations to check but it is just to make my point so that it remains easy for you to understand the point i am going to make here.

So we create an attribute named obj of custom object type defined inside the controller class as ObjectWrapper. It is the most common way of creating a group of the attributes you are going to deal with in your component.

public with sharing class ContactController {

public class ObjectWrapper {

        @AuraEnabled

        public string customerName;

        @AuraEnabled

        public double amount;        

    }

}

So, to check for validations, there is a aura:handler called change which is provided by the salesforce and it gets automatically fired whenever the value associated with it changes. Therefore I have associated my whole object value with handler so that it fires automatically and checks for validations.

<aura:handler name="change" value="{!v.obj}" action="{!c.check}"/>

Now lets take a look a client controller side,

check : function(component, event, helper) {

var objValues = component.get("v.obj");

if(objValues.customerName == 'Shubham'){

component.find("cname").set('v.validity',{valid:false, badInput:true});

}

if(objValues.amount == 1111){

component.find("lamt").set('v.validity',{valid:false, badInput:true});

}

}

It is very simple to understand, just taking the values from the attribute and separately validating each of the object fields against the expected values. 

To show the error message against respective fields, I am using validity implicit object of lightning:input and setting it as false along with the desired message property like badInput property in this case so that it shows associated message below the field on the UI.

So this way we don't need to use different different events on each input fields. We just have to write only single event handler i.e. change. And most importantly we are using lightning:input in place of  ui:input which holds the power of whole SLDS styling and all which keeps us at bay from using slds classes explicitly with each ui:input. I hope you guys agree with this 😊

If you have liked my post please comment and share your opinions with me. Looking forward to your inputs!!!

Thanks !!