Salesforce lightning fields validation

Nisar Ahmad May 11, 2019

Lightning Component :


<aura:component  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome"  > 
    <lightning:layout multipleRows="true">
        <lightning:layoutItem size="6" padding="horizontal-small">
            <lightning:input aura:id="FirstName" type="text" label="FirstName" required="true" />
        </lightning:layoutItem>
        <lightning:layoutItem size="6" padding="horizontal-small">
            <lightning:input aura:id="LastName" type="text" label="LastName" required="true" />
        </lightning:layoutItem>
        <lightning:layoutItem size="6" padding="horizontal-small">
            <lightning:input aura:id="Phone" type="tel" label="Phone" required="true" />
        </lightning:layoutItem>
        <lightning:layoutItem size="6" padding="horizontal-small">
            <lightning:input aura:id="email" type="text" label="E-mail" required="true" />
        </lightning:layoutItem>
        <lightning:layoutItem size="12" padding="horizontal-small">
            <lightning:textarea  aura:id="Comment" name="comments" label="Comment"  required="true" />
        </lightning:layoutItem>
        <lightning:layoutItem size="12" padding="horizontal-small">
            <lightning:button label="Cancel" />
            <lightning:button variant="brand" label="Save" onclick="{!c.validationCheck}"/>
        </lightning:layoutItem>
    </lightning:layout> 
</aura:component>

Lightning Controller :


({
    validationCheck : function(component, event, helper) {
        var validateFieldNames = [];
        
        // 1.All Aura Id Names
        validateFieldNames.push.apply(validateFieldNames, [
            'FirstName', 'LastName', 'Phone', 'email', 'Comment'
        ]);
        
        var allValid = validateFieldNames.reduce(function(valid, fieldName) {
            var field = component.find(fieldName);
            field.showHelpMessageIfInvalid();
            
            return (valid && field.get('v.validity').valid);
        }, true);
        
        if (allValid) {
            helper.submitMethod(component, event); 
        }else{
            console.log('Error');
            helper.scrollToTop();
            return;
        }
    },
})

Controller Helper :


({
    submitMethod : function(component, event) {
        console.log('Submit'); 
        //Code
    },
    scrollToTop: function() {
        window.scrollTo({
            left: 0,
            top: 0,
            behavior: 'smooth'
        });
    },
})

Output :

Tags