0

I trying to validate ui:inputDate along with lightning:input of type Date. But I'm getting the error as

Action failed: c:DateValidation$controller$doAction [inputCmp.showHelpMessageIfInvalid is not a function]

when I try to validate ui:inputDate.

Here is my code

Component

<aura:component>

<aura:attribute name="today" type="String" default=""/>
<aura:attribute name="today1" type="String" default=""/>
<aura:attribute name="date1" type="Date" default=""/>
<aura:attribute name="date2" type="Date" default=""/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<ui:inputDate aura:id="expdate" required = "true" label="Today's Date" format ="MM/DD/YY" class="field" value="{!v.date1}" displayDatePicker="true" />      
<ui:inputDate aura:id="expdate" required = "true" label="Today's Date" format ="MM/DD/YY" class="field" value="{!v.date2}" displayDatePicker="true" />

<lightning:input type="date" required = "true" label="Date1" aura:id="expdate" name="today" value="{!c.today}"/>
<lightning:input type="date" required = "true" label="Date2" aura:id="expdate" name="today1" value="{!c.today1}"/>
<ui:button class="btn" label="Submit" press="{!c.doAction}"/>   

Controller

({
    doAction : function(component, event, helper) {
        var allValid = component.find('expdate').reduce(function (validFields, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validFields && inputCmp.get('v.validity').valid;
        }, true);
        if (allValid) {
            alert('All form entries look valid. Ready to submit!');
        } else {
            alert('Please update the invalid form entries and try again.');
        }
    },
    doInit : function(component,event,helper){
         var today = new Date();
        component.set('v.date1', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
        component.set('v.date2', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
    }
})
  • 4
    As per Documentation ui:inputDate doesn't exposed a showHelpMessageIfInvalid method thats why you are getting a error. – vignesh Feb 12 at 12:26
  • so how can we validate ui:inputDate without writing custom javascript – prasanthcheenu Feb 12 at 12:27
  • you need to write custom validation to Add or remove error based on conditions. – vignesh Feb 12 at 12:39
  • 1
    @vignesh you may like to add your comments as an answer. That's what is the case here. – Jayant Das Feb 12 at 13:40
1

As per Documentation ui:inputDate doesn't exposed a showHelpMessageIfInvalid method thats why you are getting a error.

If you want to add error on ui components you need to write custom validation to Add or remove error based on your need.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.