Hello friends, today we will learn to add custom validation on fields in the lightning component Salesforce. We use validation on fields to filter the correct data so our data should be good in the database and these things show on the spot to the user end. In this way, users also get notified.
We create a controller method where we use aura:Id to get all inputs and reduce and check validation on each field. we put the same auraId to all fields so it will easy and dynamic.
We create a simple form in which we will show fields validation like phone no, email format, and field required and validation fields in Lightning Component Salesforce.
checkout LWC validation: LWC Fields validation
TechdicerLightningComponentValidation.cmp :
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="options" type="List" default="[
{'label': 'India', 'value': 'India'},
{'label': 'USA', 'value': 'USA'},
{'label': 'China', 'value': 'China'},
]"/>
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning:icon iconName="standard:event" alternativeText="Event" title="Event" />
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Lightning Component Custom Validation on fields</span>
<span class="slds-page-header__title slds-truncate" title="TechDicer">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<lightning:card title="Personal Info">
<p class="slds-var-p-around_small">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12" mediumDeviceSize="6" largeDeviceSize="6">
<lightning:input name="name" aura:id="field" class="fieldvalidate" type="text" label="Name" required="true" ></lightning:input>
<lightning:input name="phone" aura:id="field" class="fieldvalidate" type="tel" label="Phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}$" message-when-pattern-mismatch="Please enter a valid phone number" required="true"></lightning:input>
<lightning:input name="company" aura:id="field" class="fieldvalidate" type="text" label="Company" required="true"></lightning:input>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="12" mediumDeviceSize="6" largeDeviceSize="6">
<lightning:input name="email" aura:id="field" class="fieldvalidate" type="email" label="Email" pattern="[A-Za-z0-9._-]+@[a-z0-9-]+.[a-z]{2,}$" message-when-pattern-mismatch="Please enter a valid email" required="true"></lightning:input>
<lightning:combobox name="country" aura:id="field" label="Country" value="" placeholder="Select Country" options="{! v.options }" required="true"/>
<lightning:input name="pincode" aura:id="field" class="fieldvalidate" type="number" label="Pin Code" min="1000" max="999999" message-when-range-overflow="Please enter a correct pincode" message-when-range-underflow="Please enter a correct pincode"></lightning:input>
</lightning:layoutItem>
<lightning:layoutItem size="12" class="slds-var-p-top_small">
<lightning:button class="slds-align_absolute-center" variant="brand" label="Submit" onclick="{!c.onSubmit}"></lightning:button>
</lightning:layoutItem>
</lightning:layout>
</p>
</lightning:card>
</aura:component>
TechdicerLightningComponentValidationController.js :
({
onSubmit : function(component, event, helper) {
//Validating all input fields together by aureid 'field'
let isValid = component.find('field').reduce(function(isValidSoFar, inputCmp){
//display the error messages
inputCmp.reportValidity();
//check if the validity condition are met or not.
return isValidSoFar && inputCmp.checkValidity();
},true);
},
})
What’s your Reaction?
+1
2
+1
+1
+1
+1
+1
1
Total views : 1077116