function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
matthewGTSmatthewGTS 

lightning:input doesn't validate negative decimal

I have a form where people can enter a value between zero and one.  I am using the following element to capture their input 
<lightning:input name="example" label="example" type="number" min="0.0" max="1.0" step="0.01"/>
Negative values, being less than the minimum, should not be valid.  Entering "-0.01" is correctly identified as an invalid value.
Negative value "-0.01" is correctly identified as invalid
However, if I instead enter that value as "-.01" (without the zero to the left of the decimal point), the input element does NOT identify it as an invalid value. 
Negative value "-.01" is incorrectly identified as valid
I had to write extra code to check the value before the form gets submitted to compensate for this.

Is this a bug, or is there a configuration that I am missing?
 
Best Answer chosen by matthewGTS
matthewGTSmatthewGTS
I kind of like the idea of checking the first character of input, but it isn't as simple as checking for zero or one.  I didn't include this in the original post, but the real requirement is to have an arbitrary upper bound (which is 1.0 most of the time, but could be something else).  Having a regex that can handle any bounds is an untenable solution.

For anyone else who stumbles upon this later, this is what I went with in the end: 
<lightning:input aura:id="example" name="example" label="example" required="true" 
                             type="number" step=".01" max="{!v.upperBound}" min="0.0" 
                             value="{!v.inputValue}" class="slds-p-bottom_large" />
and then in the controller js that runs on submit I have 
var inputValue = component.get("v.inputValue");
var upperBound = component.get("v.upperBound");
if(component.find("example").get("v.validity").valid && inputValue >= 0 && inputValue <= upperBound){
// get action, set params, enqueue action
}


 

All Answers

Raj VakatiRaj Vakati
Try this
  
<lightning:input type="text" label="Numeric value" aura:id="myInput" name="myInput" pattern="[0-9]*"/>

Or use javascript validation 
  
var validity = cmp.find("myInput").get("v.validity");
console.log(validity.valid);

 
matthewGTSmatthewGTS
Raj, thanks for your reply, but I specifically need a decimal value from 0 to 1 (inclusive).  The pattern "[0-9]" wouldn't match a decimal value like 0.5 which should be valid.  Changing the input to a text type also disables the validation for minimum and maximum values, as well as the increments.  I'm not familiar enough with regex to write a pattern that does all of that, and it might not be an extensible solution since the whole pattern would have to be rewritten if the requirements changed to needing a decimal value from -1 to 2.
Alain CabonAlain Cabon
Hi,

You can use a regex in javascript in the controller with onchange="{!c.myvalidate}"

var regex = /^[^01]/;  pattern of error means: not begins with 0 or 1
  
<lightning:input aura:id="mynumber" name="example" label="example" type="number" min="0.0" max="1.0" step="0.01" onchange="{!c.myvalidate}"/>
  
({
    myvalidate : function(cmp, event, helper) {
        var fieldnumber = cmp.find('mynumber');
        var number = fieldnumber.get('v.value');
        console.log('number:' + number);
        var regex = /^[^01]/;
        var found = number.match(regex);
        console.log(found);
        if (found) {
            console.log('erreur');
            fieldnumber.set('v.value',0);    
            fieldnumber.focus();
        }      
    }
})

The value is set to zero if the pattern of error is found. 

There is messageWhenBadInput that also exists but the change of value itself with zero is more stable.

https://developer.salesforce.com/docs/component-library/bundle/lightning:input/specification
 
Ajay K DubediAjay K Dubedi
Hi Matthew,

Below Code can fulfill your requirements, Hope this will work for you.

type 1 :

<lightning:input name="example" label="example" type="number"  step="0.01"/>

type 2 :

<lightning:input name="example" label="example" type="number"  min="-0.1" max="1.0" step="0.01"/>

Please mark this as best answer if this solves your problem.

Thank you,
Ajay Dubedi
Alain CabonAlain Cabon
Hi,

It is better to let the field empty if the value is not correct. 
({
    myvalidate : function(cmp, event, helper) {
        var fieldnumber = cmp.find('mynumber');
        var number = fieldnumber.get('v.value');
        console.log('number:' + number);
        var regex = /^[^01]/;
        var found = number.match(regex);
        console.log(found);
        if (found) {
            console.log('erreur');
            fieldnumber.set('v.value','');             
            fieldnumber.set('v.messageWhenBadInput','my error');
            fieldnumber.focus();         
        }      
    }
})



 
matthewGTSmatthewGTS
I kind of like the idea of checking the first character of input, but it isn't as simple as checking for zero or one.  I didn't include this in the original post, but the real requirement is to have an arbitrary upper bound (which is 1.0 most of the time, but could be something else).  Having a regex that can handle any bounds is an untenable solution.

For anyone else who stumbles upon this later, this is what I went with in the end: 
<lightning:input aura:id="example" name="example" label="example" required="true" 
                             type="number" step=".01" max="{!v.upperBound}" min="0.0" 
                             value="{!v.inputValue}" class="slds-p-bottom_large" />
and then in the controller js that runs on submit I have 
var inputValue = component.get("v.inputValue");
var upperBound = component.get("v.upperBound");
if(component.find("example").get("v.validity").valid && inputValue >= 0 && inputValue <= upperBound){
// get action, set params, enqueue action
}


 
This was selected as the best answer