Custom validation message on Lightning Component

Question

I am not able to show the custom validation error message based on my callback method in the helper class.

Controller.js

saveCase : function(component, event, helper){
 var validTab4 = helper.validateTab4(component);
 var validTab1 = helper.validateTab1(component);
 var validTab2 = helper.validateTab2(component);
 var validTab3 = helper.validateTab3(component);

//My New method 
var isValidDate = helper.validateExtDate(component);


if(condition….) {

   //Custom validation messages…
     helper.createCase(component);
}

Helper.js

validateExtDate:function(component)
{
    var caseRec = component.get("v.case");
    var action = component.get("c.getResponseDeadlineOnEdit");
    action.setParams({
                                "cs":caseRec
    });

    action.setCallback(this,function(response){
             this.processresults(response, component);
    });
    $A.enqueueAction(action);
},

processresults : function(response,component) {
    var extnsDate = component.find("respExtdate");
    var extnsDateVal = extnsDate.get("v.value");
    console.log('extnsDateVal****'+extnsDateVal);
    var extDate = new Date(extnsDateVal);

    var state = response.getState();
    if(state === "SUCCESS") {
         var responseDeadlineDate = response.getReturnValue();      
         if(extDate <=  deadlineDate) {
                    extnsDate.set("v.errors", [{message: "Please select a different date” }]);
        }
}

On click of the Save button the saveCase method on the Controller.js is invoked and executing a series of methods along with helper.CreateCae in the helper.js. All this process is working without any issue.

Part of my requirement is to perform a new validation, that requires a new callback to Apex. So I have written a new method in helper i.e helper.validateExtDate and added the validation check. But due to the asynchronous behavior helper.CreateCase in controller is executing before helper.validateExtDate.

I have added Boolean variables like component.set(“v.validDate”, false) after the validation and the same before calling the helper.CreateCase but it is not working.

All I need to do is to show the validation message and do not proceed to helper.CreateCase.

Answer 1

change validateExtDate to

validateExtDate: function(component)
{
    return new Promise($A.getCallback(function(resolve, reject) {
    var caseRec = component.get("v.case");
    var action = component.get("c.getResponseDeadlineOnEdit");
    action.setParams({
                                "cs":caseRec
    });

    action.setCallback(this,function(response){
        if(response.getState()==="SUCCESS") {
             this.processresults(response, component);
             resolve("Resolved");
        } else {
            //error handling
            reject("Rejected");
        }

    });
    $A.enqueueAction(action);
},

In controller:

saveCase : function(component, event, helper){
 var validTab4 = helper.validateTab4(component);
 var validTab1 = helper.validateTab1(component);
 var validTab2 = helper.validateTab2(component);
 var validTab3 = helper.validateTab3(component);

helper.validateExtDate(component)()
    .then(
        // resolve handler
        $A.getCallback(function(result) {
            helper.createCase(component);
        }),

        // reject handler
        $A.getCallback(function(error) {
            console.log("Promise was rejected: ", error);
            return errorRecoveryPromise();
        })
    )