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());
    }
})
Improve this question
4
  • 4
    As per Documentation ui:inputDate doesn't exposed a showHelpMessageIfInvalid method thats why you are getting a error. – vignesh Feb 12 '19 at 12:26
  • so how can we validate ui:inputDate without writing custom javascript – prasanth Feb 12 '19 at 12:27
  • you need to write custom validation to Add or remove error based on conditions. – vignesh Feb 12 '19 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 '19 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.

Improve this answer

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.