0

I am trying to create a dynamic form validation using the lightning:input component.

According to the documentation of this component (https://developer.salesforce.com/docs/component-library/bundle/lightning:input/documentation), to set a custom error, I have to use the setCustomValidity() method, but the component will continue to present the custom error until I pass an empty string in this same method.

In order to reevaluate the form after a first submit that gone wrong, I must clean the custom error from all fields. To do so, I use the following function in helper:

reevaluateFields : function(component) {
        // get all the elements of the form
        var elements = component.find('taskFormElement');

        //iterate the elements
        for(var i = 0; i < elements.length; i++) {
            // clean the field's custom error
            elements[i].setCustomValidity('');
            // function to reevaluate the field's validity 
            elements[i].reportValidity();
        }
    },

In theory this should work like a charm, but in practice the system throws an error: "elements[i].setCustomValidity is not a function". And this error happens only when the "component.get()" returns an array, because when it returns only one component, the setCustomValidity() function works perfectly.

Does anyone knows if it is possible to make this work, and how I could do so?

  • Is there any other component whom you have assigned same id, what I feel is component.find gave you a component which is not lightning:input and thus you could not call its corresponding method. Can you post complete code? – Pranay Jaiswal Jul 21 '18 at 8:36
  • Thank you @PranayJaiswal you have made me realize that I was using a select component, and not an input, which was triggering the error, even that it is weird to me that the select does not have a validation like input. Thank you very much! – Igor Santana Aug 14 '18 at 11:01
0

You can try a different way of clearing the lightning:input error message

reevaluateFields : function(component) {
        // get all the elements of the form
        var elements = component.find('taskFormElement');

        //iterate the elements
        for(var i = 0; i < elements.length; i++) {
            // clean the field's custom error
            elements[i].set('v.validity', {valid:true, badInput :false});
            // function to reevaluate the field's validity 
            elements[i].showHelpMessageIfInvalid();
        }
    }

Source: https://salesforce.stackexchange.com/a/184718/19118

  • Pranay Jaiswal thank you for the reply, but unfortunately, even with this code, the error still happen with the reportValidity() function =( – Igor Santana Jul 20 '18 at 18:48
  • @IgorSantana updated code, can you see if it works? – Pranay Jaiswal Jul 20 '18 at 18:54
  • sorry, I could not verify if this works because now salesforce throws the "setCustomValidity is not a function" when I try to add a custom error in the component. I would have to use the component.get() function to get only the component I want to throw an error, but if I change de aura:id of the elements to be unique, I'm not shure how I would retrieve all of them to clear the custom error. This is being harder than I expected! – Igor Santana Jul 20 '18 at 19:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.