0

I have number of Lightning input fields in my component. If there is any error in input from user, On submit of form, I want to move the focus onto the first erroneous Lightning input.

In the begining , we have implemented this like this using custom validity:

 inputs.forEach(input => {
            if(!input.checkValidity()){
                // Only check for validation errors that don't have to do with mandatoryness 
                if(!input.validity.valueMissing || input.name === 'LegalName'){
                    input.reportValidity();
                    areAllValid = false;
                    if(!scrollOnce){
                        scrollOnce = true;
                        input.scrollIntoView();
                        window.scrollBy(0,-200);
                    }
                }

            }
        });

But now some field new requirement is to show the error on field once max length is reached , on click of submit. Earlier I was using max length attribute to restrict user from entering once max length is reached, but now we need to show error to customer rather than restricting. For this I cannot use pattern matching because I need it for pattern matching error and also error message is different. So For this I need to show custom error message.

But this is causing issue because now I cannot move the focus on first erroneous input in form as this is custom error.

Any body having any idea, how can we achieve this?

  • Are you using lightning-input or lightning-input-field, can you add the HTML markup as well? – rahul gawale Apr 20 at 8:42

Your Answer

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

Browse other questions tagged or ask your own question.