I have an issue like i am using lightning:input which needs to take numbers. I know if i use type as number attribute then it allows user to enter only numbers. But my requirement is like user can enter anything but after pressing the button i have validate whether it is a number or not and then need to display an error message below that input field. I have used the below code but not achievable. Can someone please help on this. Component :

<lightning:Input aura:id="amount" name="amount" required="true" label="Amount" messageWhenBadInput="Please enter number"></lightning:Input>

Controller :

addIncome : function(component,event,helper) {
    var incomes = component.get('v.incomes');
    var amt = component.find('amount').get('v.value');
    var inputCmp = component.find('amount');
    if(!isNaN(amt) && amt != null) {
    else {
        alert('Please enter valid numbers from 0-9');
        inputCmp.set('v.validity', {valid:false, badInput :true});
        // inputCmp.set("v.errors", [{message:"Input not a number: " }]);

Why not Bind, the type attribute of input with a variable.

<aura:attribute name="fieldType" type="String" default=""/>
<aura:attribute name="fieldErrorMessage" type="String" default=""/>

<lightning:input aura:id="amount" name="amount" required="true" label="Amount" messageWhenBadInput="{!v.fieldErrorMessage}" type="{!v.fieldType}" ></lightning:Input>

And on button click change the value of fieldErrorMessage and fieldType which will dynamically change the type of input field and the message.

  • Pranay, Thanks for the response. But i do not want to specify type attribute over there. In controller i need to check and need to throw an error. As per the suggestion that you provided i understand that dynamic value of error message will be passed. But my intention is want to throw a static error message if the input is not a number. – user5558 May 2 '18 at 11:50
  • 5
    It looks more like xyproblem.info. If you dont allow your users to accept charecters why even allow them to input it. – Pranay Jaiswal May 2 '18 at 11:54
  • @PranayJaiswal Nice reference to xyproblem.info. +1 – crmprogdev May 2 '18 at 12:51

please check my answer on this Question, i think it will do what you want.

in your case you have only to put my code under your field

Herr who you code should look like:

<aura:attribute name="showError" type="Boolean" default="false" access="private"/>
<aura:attribute name="errorMessage" type="String" access="private"/>

<lightning:Input aura:id="amount" name="amount" required="true" label="Amount" messageWhenBadInput="Please enter number"></lightning:Input>
<aura:renderIf isTrue="{!v.showError}">
                <div id="error">
                    <ui:outputRichText value="{!v.errorMessage}"/>

JS: add this to you logic to show the error message you want.

component.set("v.showError", true);
component.set("v.errorMessage", "XYZ");

Got the answer. I have just added inputComp.focus(); in the above line of my controller. inputCmp.set('v.validity', {valid:false, badInput :true});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.