How to remove mandatory error messages

Question

I am using lightning input field which is mandatory.when ever the input field is empty required error message is displaying.Now what is happening is as soon as we start typing some text inside the input field still the error message is there,if the user clicks outside the input field the error message is disappearing.I want to hide the error message as soon as user starts typing in input field.How can we achieve it.

   <lightning:input aura:id="inputField" type="number" name="volume" value="{!v.Details.volume}" required="true" min="1" label="volume" messageWhenValueMissing ="Required Field" maxlength="35" />

Answer 1

You can use onchange event and reportValidity() function for this which will check for validity after every change in input like this

cmp

<lightning:input aura:id="inputField" type="number" name="volume" value="{!v.Details.volume}" required="true" min="1" label="volume" messageWhenValueMissing ="Required Field" maxlength="35" onchange="{!c.change}" />

Js

 change : function(component, event, helper) {
var inp=component.find("inputField");
 inp.reportValidity();
}