Show custom error on lightning:input

  • I was trying if we can validate input in javascript and then post errors on latest lightning:input. But i think it doesn't support such use case.

    pattern attribute is there but it cant work when i/p is based on other fields.

    The requirement I am trying to achieve is that phone number without spaces should be 11 digits.

    Markup:

              <lightning:input type="tel" label="Telephone"
                 name="tel" value="{!v.applicant1.Phone__c}" pattern="^[0-9_ ]*$"
                 messageWhenPatternMismatch="Phone number is not valid"
                 onblur='{!c.checkValidityOfphone}'
                 messageWhenBadInput='Phone number should be 11 chars max'
                 /> 
    

    Controller:

    checkValidityOfphone : function(component, event, helper) {
      console.log('checkValidityOfphone called');
      var inp = event.getSource();
      var val=inp.get('v.value');
      val=val.replace(/ /g,'');
      console.log(val);
      console.log(val.length);
      if(val.length!=11){
        inp.set("v.errors", [{message:"Input not a number: " + val}]);
        console.log('Error Set called');   
        //  inp.get('v.validity').valid=false;
      }
    }
    

    According to the given doc, lightning:input does support client side validations. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_validate_fields.htm

  • Aidan

    Aidan Correct answer

    4 years ago

    This is a bit of an old question now, but I've discovered another way which seems pretty legit. The validity attribute of lightning:input is not just for reading the validity, you can also set it. So, write the component like this:

    <aura:handler name="change" value="{!v.value}" action="{!c.valueChangeValidation}"/>
    
    <lightning:input aura:id="inputField" 
                     type="text" value="{!v.value}" 
                     label="Enter foo" 
                     messageWhenBadInput="You must say foo" />
    

    And then the controller like this:

    valueChangeValidation : function(component, event, helper) {
        var inputField = component.find('inputField');
        var value = inputField.get('v.value');
        if(value != 'foo') {
            inputField.set('v.validity', {valid:false, badInput :true});
            inputField.showHelpMessageIfInvalid();
    
        }
    }
    

    Then, you can write whatever logic you want in that handler method and the result is shown in the normal Lightning way.

    Does the solution presented here work still? I'm trying to do some custom validation and this isn't working for me.

    Hi @ratatoskr , you have to call 'inputField.showHelpMessageIfInvalid();' after setting the valid flag as false. This displays error message. I have edited the answer to reflect the same

    Thanks @PranayJaiswal, though I've tried that and still nothing. Is this working in Spring '18 orgs?

    I tried in summer 18, works charm. Would try again on Spring 18 and confirm

    Ah, I suppose I meant Summer, but in any case still very frustrating because I've copied exactly what you have here and still nothing. I can see valid: true and badInput: false on a console.dir of the inputField. Time to go custom, I guess.

    This is not working anymore. From documentation: "This validity attribute is a read-only object with the following boolean properties."

    @DanielHorký is right, this no longer works, but they gave us something very similar: reasonCmp.setCustomValidity("Error message or blank if valid"); reasonCmp.reportValidity();

    `reportValidity()` does not clear error when component is valid. I think it's bug.

    you need to set the customValidity to blank to clear the message - setCustomValidity("") and call reportValidity().

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM