Select your Language

Custome validation in lighting Component

Use this below code

Lightning component:

<aura:component>
        <lightning:input aura:id="inputCmp" label="Enter your name:" name="fullName" />
        <lightning:button label="Register" onclick="{! c.register }" />
    </aura:component>

Controller:
({
    register : function(component, event) {
        var inputCmp = component.find("inputCmp");
        var value = inputCmp.get("v.value");
        // is input valid text?
        if (value === "John Doe") {
            inputCmp.setCustomValidity("John Doe is already registered");
        } else {
            inputCmp.setCustomValidity(""); // if there was a custom error before, reset it
        }
        inputCmp.reportValidity(); // Tells lightning:input to show the error right away without needing interaction
    }
})

Three main seeded functions are used for the custom validation in input components.

  • reportValidity
  • setCustomValidity
  • checkValidity

Reference Link:

No comments:

Post a Comment