1

I have date type lightning input field:

<lightning:input aura:id="startDate" type="date" dateStyle="short" value="{!v.startDate}" required="true" class="noAsterisk" onblur="{!c.handleValidationCheck}" />

I've added a custom validation check function:

handleValidationCheck : function(component, event, helper) {
    console.log('********************************* we are inside the handleValidationCheck function');
    var inputCmp = component.find("startDate");
    var validity = component.find("startDate").get("v.validity");
    var inputCmpValue = inputCmp.get("v.value");
    console.log('***************************************** inputCmp value ' + inputCmpValue);
    console.log('***************************************** isValid ' + validity.valid);
    console.log('***************************************** valueMissing ' + validity.valueMissing);
    if(inputCmpValue === null) {
        console.log('************************************ we are inside the if branch');
        inputCmp.setCustomValidity("Please select a start date");
    }
    else {
        console.log('************************************ we are inside the else branch');
        inputCmp.setCustomValidity("");
    }
    inputCmp.reportValidity();
}

Updated method that includes the timeout function:

handleValidationCheck : function(component, event, helper) {
    console.log('********************************* we are inside the handleValidationCheck function');
    window.setTimeout( () => {
        var inputCmp = component.find("startDate");
        var validity = component.find("startDate").get("v.validity");
        var inputCmpValue = inputCmp.get("v.value");
        console.log('***************************************** inputCmp value ' + inputCmpValue);
        console.log('***************************************** isValid ' + validity.valid);
        console.log('***************************************** badInput ' + validity.badInput);
        console.log('***************************************** patternMismatch ' + validity.patternMismatch);
        console.log('***************************************** rangeOverflow ' + validity.rangeOverflow);
        console.log('***************************************** rangeUnderflow ' + validity.rangeUnderflow);
        console.log('***************************************** stepMismatch ' + validity.stepMismatch);
        console.log('***************************************** tooLong ' + validity.tooLong);
        console.log('***************************************** tooShort ' + validity.tooShort);
        console.log('***************************************** typeMismatch ' + validity.typeMismatch);
        console.log('***************************************** valueMissing ' + validity.valueMissing);
        if(inputCmpValue === null) {
            console.log('************************************ we are inside the if branch');
            inputCmp.setCustomValidity("Please select a start date");
        }
        else {
            console.log('************************************ we are inside the else branch');
            console.log('***************************************** inputCmp value ' + inputCmpValue);
            inputCmp.set('v.validity', {valid:true, valueMissing :false});
            console.log('***************************************** valueMissing ' + validity.valueMissing);
            inputCmp.setCustomValidity("");

        }
        inputCmp.reportValidity();
      }, 100);
}

isValid is always returning false because the valueMissing attribute is returning true even though the input has a value and the console log shows that the else branch is entered. I'm trying to clear the validation error message Complete this field. and remove the red border around the input.

1 Answer 1

0

Unfortunately, I've had this before too. onblur fires before any change is registered in the component and well before the onchange handler fires.

The only thing that I've every been able to do to fix is to use a timeout to delay the value retrieval so it is able to compute isValid.

You could of course roll your own component, but just adding the timeout works fine:

handleValidationCheck : function(component, event, helper) {
  window.setTimeout( () => {
    //the rest of your handler function
  }, 100);
}

You may be able to lower the timeout value, by quite a lot - but you'll need to tweak that for your particular UI.

1
  • I tried using the window.setTimeout function, but it's not working. I've updated the original post to include the code change. Is the implementation wrong?
    – Dman100
    Jun 28, 2021 at 13:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .