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.

  • RedDevil

    RedDevil Correct answer

    4 years ago

    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.

    are you getting the message on click of Upload button? I deleted the .css file and checked console.log, its not coming for me.

    Yes.on click of upload i am calling the controller function which is doing the validity check

    My bad. I did not return after error and executed the code that caused unrendering of these components.

    How do you remove error message when fields are populated?

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM