Activity Forums Salesforce® Discussions Validations in Salesforce Lightning Form

  • Kumar

    Member
    December 20, 2016 at 2:26 pm

    Hi all,

    I have a lightning component which is used as a form for entering field values for a custom object. How can I apply validations on those fields?

    Thanks

  • Satyakam

    Member
    December 21, 2016 at 7:57 am

    Hi Kumar,

    To validate field in salesforce lightning,go through the following code:

    Component:

    <aura:component >

    <aura:attribute name="AccountAtt" type="Account" default="{'sobjectType':'Account',
    'Name':''}"/>
    <ui:inputText aura:id="AccName" value="{!v.AccountAtt.Name}"/>
    <ui:button label="Submit" press="{!c.SubmitButton}"/>

    </aura:component>

    jsController:

    ({
    SubmitButton : function(component, event, helper) {
    var name=component.find("AccName");
    var AccName=name.get("v.value");
    if($A.util.isEmpty(AccName)){
    name.set("v.errors", [{message:"Input not valid: " + AccName}]);

    }
    }
    })

    Hope this will help you,

    Thanks

  • Kumar

    Member
    December 21, 2016 at 8:16 am

    This is a validation rule for 'Account name is not empty' right?

    Thanks, I will implement this for my lightning form.

  • Satyakam

    Member
    December 21, 2016 at 8:18 am

    Yes

  • Kumar

    Member
    December 21, 2016 at 8:31 am

    It works flawlessly! Thanks

    I used this in a helper for my JS controller, here is my code:

    Component:

    <aura:component controller ="CampingListController">

    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c"
    default="{ 'sobjectType': 'Camping_Item__c',
    'Name': '',
    'Packed__c': false }"/>

    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

    <div class="slds-col slds-col--padded slds-p-top--large">
    <div aria-labelledby="newcampingitemform">

    <!-- BOXED AREA -->
    <fieldset class="slds-box slds-theme--default slds-container--small">

    <legend id="newcampingitemform" class="slds-text-heading--small
    slds-p-vertical--medium">
    Add Camping Item
    </legend>

    <!-- CREATE NEW EXPENSE FORM -->
    <form class="slds-form--stacked">

    <div class="slds-form-element slds-is-required">
    <div class="slds-form-element__control">
    <ui:inputText aura:id="campname" label="Camping Item Name"
    class="slds-input"
    labelClass="slds-form-element__label"
    value="{!v.newItem.Name}"
    required="true"/>
    </div>
    </div>

    <div class="slds-form-element slds-is-required">
    <div class="slds-form-element__control">
    <ui:inputNumber aura:id="quantity" label="Quantity"
    class="slds-input"
    labelClass="slds-form-element__label"
    value="{!v.newItem.Quantity__c}"
    required="true"/>

    </div>
    </div>

    <div class="slds-form-element">
    <div class="slds-form-element__control">
    <ui:inputCurrency aura:id="price" label="Price"
    class="slds-input"
    labelClass="slds-form-element__label"
    value="{!v.newItem.Price__c}"
    required="true"/>
    </div>
    </div>

    <div class="slds-form-element">
    <ui:inputCheckbox aura:id="packed" label="Packed?"
    class="slds-checkbox"
    labelClass="slds-form-element__label"
    value="{!v.newItem.Packed__c}"/>
    </div>

    <div class="slds-form-element">
    <ui:button label="Create Item"
    class="slds-button slds-button--brand"
    press="{!c.saveItem}"/>
    </div>

    </form>
    <!-- / CREATE NEW EXPENSE FORM -->

    </fieldset>
    <!-- / BOXED AREA -->

    </div>
    <!-- / CREATE NEW EXPENSE -->

    </div>

    JS Controller Method:

    saveItem: function(component, event, helper) {

    if(helper.validateCampingItem(component)){
    // Create the new expense
    var newItem = component.get("v.newItem");
    helper.createItem(component, newItem);
    }

    Helper Method:

    validateCampingItem : function(component) {
    var validRecord = true;

    // Name must not be blank
    var nameField = component.find("campname");
    var campname = nameField.get("v.value");
    if ($A.util.isEmpty(campname)){
    validRecord = false;
    nameField.set("v.errors", [{message:"Camping name can't be blank."}]);
    }
    else {
    nameField.set("v.errors", null);
    }
    var quantityField = component.find("quantity");
    var quantity = quantityField.get("v.value");
    if ($A.util.isEmpty(quantity)){
    validRecord = false;
    quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
    }
    else {
    quantityField.set("v.errors", null);
    }
    var priceField = component.find("price");
    var price = priceField.get("v.value");
    if ($A.util.isEmpty(price)){
    validRecord = false;
    priceField.set("v.errors", [{message:"Price can't be blank."}]);
    }
    else {
    priceField.set("v.errors", null);
    }
    return validRecord;
    },

     

  • Suhail Ayub

    Member
    May 22, 2018 at 3:15 pm

    Hi,

    I have used the above code in the exact same way. But i get this error on set v.errors

    [Cannot read property 'config' of undefined]

    Any help ?

  • William

    Member
    July 5, 2018 at 4:15 am

    Try this.

    <aura:component implements="force:appHostable" controller="LightingDmlOperation">

    <div class="container-fluid">

    <div class="slds-form-element">

    <div class="slds-form-element__control" style=" margin-left: 60px;width:25%">

    <ui:inputText aura:id="AccountName" label="  Name" class="slds-input" labelClass="slds-form-element__label"  value="{!v.newAccount.Name}"

    placeholder="Enter Name" required="true" onError="{!c.handleError}" onClearErrors="{!c.handleClearError}"  />

    </div>

    </div>

    <div class="form-group" style=" margin-left: 60px;width:25%">

    <ui:inputText aura:id="Accounttype" label="Type" class="slds-input" labelClass="slds-form-element__label"

    value="{!v.newAccount.Type}"  placeholder="Enter type value" onClearErrors="{!c.handleClearError}"/>

    </div>

    <div class="form-group" style=" margin-left: 60px;width:25%">

    <ui:inputText aura:id="AccountPhone" label=" Phone" class="slds-input" labelClass="slds-form-element__label"

    value="{!v.newAccount.Phone}" onError="{!c.handleError}" onClearErrors="{!c.handleClearError}" />

    </div>

    <div class="col-md-4 text-center" style=" margin-left: 120px;width:25%" algin="center">

    <ui:button label="Submit"   class="slds-button slds-button--neutral"  labelClass="label"  press="{!c.createAccount}"  />

    </div>

    </div>

    </aura:component>

    Controller

     

    ({

    createAccount : function(component, event, helper) {

    var nameField = component.find("AccountName");

    var nameValue = nameField.get("v.value");

    var PhoneField = component.find("AccountPhone");

    var nameValue1 = PhoneField.get("v.value");

    var newAcc = component.get("v.newAccount");

    var action = component.get("c.saveAccount");

    action.setParams({ "acc": newAcc});

    action.setCallback(this, function(a) {

    var state = a.getState();

    if (state === "SUCCESS") {

    var name = a.getReturnValue();

    }

    });

    $A.enqueueAction(action);

    if(nameValue.length <0 ||nameValue.length==0 )  {

    nameField.set("v.errors", [{message:"Name value can not blank"}]);

    }

    else if (($A.util.isEmpty(nameValue1) || $A.util.isUndefined(nameValue1))){

    PhoneField.set("v.errors",[{message:"phone can not null"}]);

    }

    else {

    nameField.set("v.errors",null);

    PhoneField.set("v.errors",null);

    }

    },

    handleError:function(cmp,event,helper){

    var comp = event.getSource();

    $A.util.addClass(cmp, "error");

    },

    handleClearError:function(cmp,event,helper){

    var comp = event.getSource();

    $A.util.removeClass(cmp, "error");

    },

    })

     

Viewing 1 - 7 of 7 posts

Log In to reply.

Popular Salesforce Blogs