What's the difference between showHelpMessageIfInvalid() and reportValidity()?

Question

lightning:input has both showHelpMessageIfInvalid() and reportValidity() methods that seem to do the same job.

showHelpMessageIfInvalid

Shows the help message if the form control is in an invalid state.

reportValidity

Display error messages if the input is invalid.

Yet lightning:select has only the showHelpMessageIfInvalid() method.

Since I have both lightning:input and lightning:select elements on my form, I cannot use the reportValidity() method on them.

So what's the difference between showHelpMessageIfInvalid() and reportValidity()? And can I use showHelpMessageIfInvalid() instead of reportValidity() in my case?

Answer 1

showHelpMessageIfInvalid is the older, "non-standard" method of reporting errors. The newer reportValidity function is related to the Web Component standard of reporting errors. Note that lightning:select does not have this method yet only because it has not yet been converted to a LWC. I would anticipate that reportValidity will become available on that component once it has been ported to LWC. However, we'll have to wait until the component has been converted to a LWC before we will know for sure. showHelpMessageIfInvalid has not been deprecated as of the time of this answer, so it should still work for the foreseeable future. You should prefer to use reportValidity if it is available, and showHelpMessageIfInvalid otherwise. That said, I do not see any harm in using showHelpMessageIfInvalid on all components, as it will be supported on those components until some time after a deprecation notice has been posted.

Edit:

You can also legally do this, as far as I can tell (would need to test further):

component.find("inputs").forEach(
  input => (input.reportValidity || input.showHelpMessageIfInvalid).call(input)
);

Which should call the newer method, if available, or fall back to the older method otherwise.