Conditional Validation not working

Question

I have a component for validation and a required flag. When the input field is not mandatory, The combo-box should throw me no error when i leave it as empty but i still want another validation on the input that is when I type some invalid value, it should throw me an error. But in my component, the I'm able to fix the empty field validation but now when i click on the combobox, its going to the if else condition and its showing me the invalid value error which i only want when i enter some value irrespective of the flag. This is what i tried, but unable to comeup with a workaround.

@api isNotRequired === false
@track tempList;
validates(){
    var inputCmp = this.template.querySelector(".inputSearchCmp");
    var value = inputCmp.value;

    if((value === "" || value === undefined) && this.isNotRequired === false){
        inputCmp.setCustomValidity("Complete this field.");
    }  
    else if(this.tempList.length < 1 ){
        inputCmp.setCustomValidity("Enter Valid Data.");
    }else{
        inputCmp.setCustomValidity(""); 
    }
    inputCmp.reportValidity();
  }

Answer 1

You can try adding an extra check to the second if condition

@track tempList;
validates(){
    var inputCmp = this.template.querySelector(".inputSearchCmp");
    var value = inputCmp.value;

    if((value === "" || value === undefined) && this.isNotRequired === false){
        inputCmp.setCustomValidity("Complete this field.");
    }  //guessing you want this to fire when this.isNotRequired
    else if(this.tempList.length < 1 && this.isNotRequired === true){
        inputCmp.setCustomValidity("Enter Valid Data.");
    }else{
        inputCmp.setCustomValidity(""); 
    }
    inputCmp.reportValidity();
}