+ 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 }" />

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") ;
            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..") ;
            dateCmp.setCustomValidity("") ;
        dateCmp.reportValidity() ;

Raj VakatiRaj Vakati
You need to use the onClearErrors="{!c.handleClearError}" metjod to clear the errors
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.

<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}" />

    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 {

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}" />


     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');
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Ajay Dubedi