[SalesForce] How to show custom validation message for lightning Select

I am trying to display custom validation message for lightning Select tag based aura id but validation is not coming on lightning Select tag.

Component Code:

<aura:component >
    <lightning:select name="select1" label="How many tickets?" aura:Id="leadtimesel" messageWhenValueMissing="Please choose one">
        <option value="">choose one...</option>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </lightning:select>
    <lightning:button variant="brand" label="Brand" title="Brand action" onclick="{! c.handleClick }" />

</aura:component>

JS Code:

({
    handleClick : function(component, event, helper){
      var firstNameField = component.find("leadtimesel");
        var value = firstNameField.get("v.value");
        alert(value);
          if(value===''||value===null) {
             alert(123);
            firstNameField.showHelpMessageIfInvalid();
        
 
        }
    }
})

Thanks,
Anil Kumar

Best Answer

You are missing required attribute from the component.

<lightning:select name="select1" label="How many tickets?" required="true" aura:id="leadtimesel" messageWhenValueMissing="Please choose one">
    <option value="">choose one...</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</lightning:select>
<lightning:button variant="brand" label="Brand" title="Brand action" onclick="{! c.handleClick }" />

As per question * needed to be hidden, This can be easily achieved by. Writing a css and importing that in cmp.

Import this CSS and change your lightning:select to add a class so that you know which slds-required class to remove.

<ltng:require styles="{!$Resource.hideAsterisk + '/css/style.css'}" />
<lightning:select name="select1" label="How many tickets?" class="noAsterisk" required="true" aura:id="leadtimesel" messageWhenValueMissing="Please choose one">

Then add this to style.css static resource.

.noAsterisk .slds-required {
    display: none;
}

This will hide your * sign.

Related Solutions

[SalesForce] How to show name of custom object in lightning component datatable

AFAIK the fieldName attribute of lightning:dataTable does not support dotted expressions that cross object boundaries such as Account__r.Name.

So the simplest fix is to add a formula field called "Account Name" of Account__r.Name to your Engagement__c object and query and reference that in the table.

Or use this technique.

[SalesForce] show error message after delay in lightning

To answer your actual question, here is how you can call a method after a wait period:

ControllerJS

callbackOnceAfterDelay : function(component, event, helper) {
        var delayInMilliseconds = 5000; //5 seconds
        window.setTimeout(
            $A.getCallback(function() {
                console.log('myHelperMethod EXECUTING NOW... ');
                helper.myHelperMethod(component, event, helper);
            }), delayInMilliseconds
        );     
    }

But, I don't think it is an elegant approach, just because you are assuming that the future method will complete in 5 seconds. Why keep the user waiting if it returns in 1 second? And what if it takes more than 5 seconds... you won't show a message at all!

Because you mentioned that a field will be updated with the error message after the callout returns, why not regularly check for an update to that field like so:

ControllerJS

callbackAfterEveryNSeconds : function(component, event, helper) {
        var intervalInMilliseconds = 1500; //1.5 seconds interval between each call
        var processId = window.setInterval(
            $A.getCallback(function() {
                console.log('myHelperMethod EXECUTING NOW... ');
                helper.setErrorMessageIfUpdated(component, event, helper); 
            }), intervalInMilliseconds
        );
        component.set("v.processId", processId); 
    },

HelperJS

setErrorMessageIfUpdated: function(component, event, helper) {
        //do a server side action here, check if error field has been updated
        //if so, do component.set("v.errorMessage", response.getReturnValue()); 
        //show the error message if not blank
        //clear the interval for repeating anymore like so: window.clearInterval(component.get("v.processId"));
    },

Notice that window.setTimeout executes once after a set delay. On the other hand, window.setInterval executes over and over after a set time period (so make sure it stops after your callout returns).

And also, did you know that you can detect changes to a specific value and fire a method when that happens? Like so: (just food for thought... you might end up not needing it at all)

<aura:handler name="change" value="{!v.record.My_Callout_Error_Message_Field__c}" action="{!c.showErrorMessageIfAny}"/>

Best Answer

Related Solutions

[SalesForce] How to show name of custom object in lightning component datatable

[SalesForce] show error message after delay in lightning

Related Topic