How to set setCustomValidity on Lightning:Input

Question

Hallo I do not get it to set a custom validation on the lightning:input field. Here is my code: Component:

<aura:iteration items="{!v.mylines}" var="line">
<tr>
    <td data-label="Date" class="slds-form--inline">
        <lightning:input aura:id="myDate" type="date" name="date" class="nolabel" value="{!line.CustomField__c}" messageWhenBadInput="Date must be newer than..." onchange="{!c.checkIfValid}" />
    </td>
</tr>

Controller:

checkIfValid: function(component, event, helper){
  console.log("here we are");
  var lines = component.get('v.myLines');

  var inputfield = event.getSource();

  var inputvalue = event.getSource().get("v.value"); // get the right value
  if (inputvalue < lines[0].customfield__c) {
    console.log('its to small'); // this works

    inputField.setCustomValidity('wrong'); //do not get any message
    inputField.reportValidity();
  }
}

I have tried the same with the component.find('aura:id') but than of course I get all x elements.

The basic idea: I have x lines and in each line is one date value and if I change one of these date values I want to check if it is smaller than the first(line/header) value. I'm thankful for any help

Thx the answer works. My new code is:

if (inputvalue < lines[0].customField__c) {
        console.log('its to small');
        inputField.setCustomValidity('wrong'); // works
    } else {
        console.log('its ok');  // get also this
        inputField.setCustomValidity('');
    }
inputField.reportValidity();

Now the issue is that the 'wrong' do not dissapear when I enter the else case. I have also tried it like:

if (!inputField.get("v.validity").valid) {
    inputField.reportValidity();
}

Which gives me the correct values but if ones the 'wrong' message apear on the page it do not dissapear anymore

Answer 1

To me, it seems that the error is due to the Case-Sensitive nature of JavaScript. As you have used two different variables inputfield and inputField in your code, which are not the same (Letter F is in different case). Please change both variable names to the same case and see if that works.

var inputfield = event.getSource();

.........
.........
........

inputField.setCustomValidity('wrong'); //do not get any message
inputField.reportValidity();