Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ayush Kumar 31Ayush Kumar 31 

Validation in lightning component

I've a ui:inputNumber field in lightning component. But this strangely takes input as "+, b, m, k, t". Now I want to restrict it using client side validation.

I've tried NaN and a couple of other methods but still stuck with it. Can anyone help here, as how to write code on controller side?

Ashif KhanAshif Khan
Hii Ayush,

You can use Regular Expression at client side validation as 
  
var letters = /^[0-9]+$/;
   var val = '234';//your value
if(!val.toString().match(letters))
{
alert('Not Number');
return false;
}else{
alert('Number');
}

I hope this will help you

Regards
Ashif
Ayush Kumar 31Ayush Kumar 31
Hi Ashif,

I want to achieve a bit different solution, I want that user can't enter any value,, i don't want to show any validation error. In VF page, using the reg ex and javascript function i've done it but in lightning component I'm unable to find any thing of that sort. 

I just want to restrict user from entering any value other than numbers.

 
Ashif KhanAshif Khan
Hi Ayush,
I worked on it
you said 'ui:inputNumber strangely takes input as "+, b, m, k, t'
but this is shortcut functionality
when you type in ui:inputNumber  it converts 1k =1000, 1m=1,000,000, 1b=1,000,000,000 ,  1t=1,000,000,000,000

I hope this will help you 
Regards
Ashif
Ayush Kumar 31Ayush Kumar 31
Hi Ashif,

That's right, it's the functionality I got to know later. But Can I restrict this also?

I've used below function to get value on key press and I'm able to get value to controller but I'm unable to return to the field dynamically as we can do it in VF page.

numcheck : function(component, event, helper)
    {
       var inp = component.find("departurePremium");  <---finds aura ID
        console.log("Inside" +inp);
         var Val = inp.getElement().value;    <---- gets the value of field dynamicay on each key press
         console.log("Input" +Val);
        var regexp =  /^\d+$/;    <---- Reg ex to validate only number
        if(regexp.test(Val)){
           console.log("Inside if---" +Val);    <------Now what would be the code here, to return false or simply don't listen to the event.
            val.value = val;
        }
     },
Ashif KhanAshif Khan
Hi Ayush,
This is the temporary solution not much good but working as per expectation I hope this will help you 
<aura:application extends="force:slds">
 <aura:handler name="change" value="{!v.number}" action="{!c.valueChange}"/>
    <aura:attribute name="number" type="integer" />
    <aura:attribute name="keycode" type="integer" />
    <ui:inputNumber label="Number" value="{!v.number}" updateOn='keydown' keydown='{!c.keyCode}' />
</aura:application>
  
({
    valueChange : function(component, event, helper) {
        var keycode = component.get('v.keycode');
        component.set('v.keycode',0);
        if([77,84,75,66,107,187,189,109].indexOf(keycode)!=-1){
            component.set('v.number',event.getParam("oldValue"));
        }
    },
    keyCode : function(component, event, helper) {
        component.set('v.keycode',event.getParams().keyCode);
    }
})
Regards
Ashif