[SalesForce] How to validate all form fields on click of button using showHelpMessageIfInvalid

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.

Best Answer

I dont see anything wrong with the code you posted. I tried your code and it did work for me.If you mark your field required and you dont enter a value the message 'Complete this field' comes below the input field.

<aura:component>
        <aura:attribute name = "documentType" type="String"/>
        <aura:attribute name = "attachmentNameValue" type="String"/>
        <lightning:layoutItem class="slds-p-around--medium" size="6">
            <lightning:select aura:id="fieldId"
                              required="true"
                              name="attachmentType"
                              label="Attachment Type"
                              value="{!v.documentType}"                             >
                <option value = "">select</option>          
            </lightning:select>
        </lightning:layoutItem>  
        <lightning:layoutItem class="slds-p-around--medium" size="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}"/>
    </aura:component>

ControllerCode:

({
    handleUploadAction : function(component, event, helper) {
        //helper.onSelectChange(component, event);
        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.');
        }
    }
})

Output was:enter image description here

just check the below 2 things:

  1. CSS tab in you component to see if there is any CSS which is hiding the message
  2. any error messages in the browser developer tools console tab.
Related Topic