Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Surya KiranSurya Kiran 

setCustomValidity not working for lightning:input date fields

Hi Folks,

I have set a custom error message using setCustomValidity() in lightning, while clearing it is not working for lightning:input date fields. Seems it is issue from Salesforce. Please let me know if there is any workaround.

Here is the example:
Lightning Component: 
<aura:component implements="force:appHostable" >
    <lightning:card footer="Card Footer" title="Hello">
        <lightning:input Label="Name" aura:id="name" value="{!v.acc.Name}" required="true"/>
        <lightning:input type="date" aura:id="date" label="Enter a date" required="true" value="{!v.acc.dhr__Custom_Date_Time__c}"/>
        <lightning:input type="date" label="Enter a date" required="true" value="{!v.acc.dhr__SLA_Expiration_Date_Time__c}"/>
        
        <lightning:button variant="brand" label="Handle Form" title="Brand action" onclick="{! c.handleForm }" />
    </lightning:card>
</aura:component>


Javascript Controller: 
({
	handleForm : function(component,event,helper){
        var nameCmp = component.find("name");
        if(!$A.util.isEmpty(component.get("v.acc.Name")) && component.get("v.acc.Name")=="Salesforce"){
        	nameCmp.setCustomValidity("Name cannot be Salesforce") ;
        }else{
            nameCmp.setCustomValidity("") ;
        }
        nameCmp.reportValidity() ;
        
        var dateCmp = component.find("date");
        if(component.get("v.acc.dhr__Custom_Date_Time__c") >   component.get("v.acc.dhr__SLA_Expiration_Date_Time__c")){
        	dateCmp.setCustomValidity("Cannot be future..") ;
        }else{
            alert('clearing..');
            dateCmp.setCustomValidity("") ;
        }
        dateCmp.reportValidity() ;
    }
})


​
Raj VakatiRaj Vakati
You need to use the onClearErrors="{!c.handleClearError}" metjod to clear the errors
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_validate_fields.htm?search_text=onClearErrors
Banshi Lal DangiBanshi Lal Dangi
I am facing this issue too. Seems it is an issue with Input type="date" only. Even custom message specified in "messageWhenValueMissing" not showing in case of input type="date".
Lokesh Krishna SagiLokesh Krishna Sagi
Hello Surya,

Please try to remove required="true" attribute and set the custom message in client controller. Its showing custom error messages when I tried it.
  
Component
-------------------

<aura:component >
    
    <aura:attribute name="date1" type="Date" />
    <lightning:input aura:id="dateIp" type="date" name="input1" label="Enter a date" value="{!v.date1}"  />
    
    <lightning:button variant="success" label="Submit" title="Base action" onclick="{!c.onButton}" />
    
</aura:component>

Controller
------------------------
({
    
    onButton : function(component, event, helper) {
        var inputCmp = component.find("dateIp");
        var value = inputCmp.get('v.value');
        
        console.log('value = '+value);
        
        if(value === '' || value == null) {
            inputCmp.setCustomValidity('Enter a date');
        }
        else {
            inputCmp.setCustomValidity('');
        }
        inputCmp.reportValidity();
        
    },
    
})

 
Jyoti Prakash MishraJyoti Prakash Mishra
Hi All,
Recently I have also faced the same issue. And found the solution.
You need to mention "auraid.reportValidity();" to show the message immediately.

Please mark as best answer if this solves your problem. 
//code from component reference guide
({
    register : function(component, event) {
        var inputCmp = component.find("inputCmp");
        var value = inputCmp.get("v.value");
        // is input valid text?
        if (value === "John Doe") {
            inputCmp.setCustomValidity("John Doe is already registered");
        } else {
            inputCmp.setCustomValidity(""); // if there was a custom error before, reset it
        }
        inputCmp.reportValidity(); // Tells lightning:input to show the error right away without needing interaction
    }
})

 
Ajay K DubediAjay K Dubedi
Hi Surya,

Try the Code it Works fine.Please change it with your requirnment. 
<aura:component >
   <aura:attribute name="choosenDate" type="Date" />
    <div class="slds-grid slds-gutters">
        <div class="slds-m-left_x-large">
            <lightning:input aura:id="ids" type="date" label="Choose a Date" value="{!v.choosenDate}" />
            <lightning:button label="Submit" onclick="{!c.onButtonClick}" />
        </div>
    </div>
</aura:component>

JS-

({
     onButtonClick : function(component, event, helper) {
        var find_component = component.find("ids");
        var value = find_component.get('v.value');
        if(value == null) {
            find_component.setCustomValidity('Please fill the Field');
        }
        find_component.reportValidity();
     }
})
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi