5

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.

1 Answer 1

6

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.
4
  • are you getting the message on click of Upload button? I deleted the .css file and checked console.log, its not coming for me.
    – Sarang
    Jun 29, 2017 at 10:41
  • Yes.on click of upload i am calling the controller function which is doing the validity check
    – RedDevil
    Jun 29, 2017 at 10:42
  • My bad. I did not return after error and executed the code that caused unrendering of these components.
    – Sarang
    Jun 29, 2017 at 10:44
  • How do you remove error message when fields are populated?
    – devforce
    Aug 9, 2019 at 12:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .