I have 2 fields in markup and a button of Upload. On click of Upload, I want to validate that these fields are not empty. I see showHelpMessageIfInvalid method in documenatation, but it is not showing me error message around the fields when they are empty.
Following is my implementation:
Markup:
<lightning:layoutItem class="slds-p-around--medium" size="12" largeDeviceSize="6" mediumDeviceSize="6" smallDeviceSize="6">
<lightning:select aura:id="fieldId"
required="true"
name="attachmentType"
label="Attachment Type"
value="{!v.documentType}"
>
<option value = "" >{!$Label.c.Select}</option>
<aura:iteration var="attachmentType" items="{!v.documentRules.allowedDocumentTypes}">
<option value ="{!attachmentType}">{!attachmentType}</option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem class="slds-p-around--medium" size="12" largeDeviceSize="6" mediumDeviceSize="6" smallDeviceSize="6">
<lightning:input aura:id="fieldId"
required="true"
label="File Name"
name="filename"
value="{!v.attachmentNameValue}"/>
</lightning:layoutItem>
<lightning:button variant="brand" label="Upload" value="uploadSearch" onclick="{!c.handleUploadAction}"/>
Controller:
var allValid = component.find('fieldId').reduce(function (validSoFar, inputCmp) {
inputCmp.showHelpMessageIfInvalid();
return validSoFar && !inputCmp.get('v.validity').valueMissing;
}, true);
if (allValid) {
alert('All form entries look valid. Ready to submit!');
} else {
alert('Please update the invalid form entries and try again.');
}
As per what I unnderstand showHelpMessageIfInvalid() method will show error message around those fields which turn out to be invalid. It gives me proper alert message but does not show the error message that "Complete this field." which it should as per documentation.
I think I am missing some understanding here.