I was trying if we can validate input in javascript and then post errors on latest lightning:input. But i think it doesn't support such use case.
pattern attribute is there but it cant work when i/p is based on other fields.
The requirement I am trying to achieve is that phone number without spaces should be 11 digits.
Markup:
<lightning:input type="tel" label="Telephone"
name="tel" value="{!v.applicant1.Phone__c}" pattern="^[0-9_ ]*$"
messageWhenPatternMismatch="Phone number is not valid"
onblur='{!c.checkValidityOfphone}'
messageWhenBadInput='Phone number should be 11 chars max'
/>
Controller:
checkValidityOfphone : function(component, event, helper) {
console.log('checkValidityOfphone called');
var inp = event.getSource();
var val=inp.get('v.value');
val=val.replace(/ /g,'');
console.log(val);
console.log(val.length);
if(val.length!=11){
inp.set("v.errors", [{message:"Input not a number: " + val}]);
console.log('Error Set called');
// inp.get('v.validity').valid=false;
}
}
According to the given doc, lightning:input does support client side validations.
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_validate_fields.htm
Best Answer
This is a bit of an old question now, but I've discovered another way which seems pretty legit. The validity attribute of lightning:input is not just for reading the validity, you can also set it. So, write the component like this:
And then the controller like this:
Then, you can write whatever logic you want in that handler method and the result is shown in the normal Lightning way.