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>
Markup
Copy

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;
        }
    },
})
JavaScript
Copy

Controller Helper :

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

Output :

Tags