Javascript validation for input type number

Question

I have input type number to give the data of number of minutes. How can I validate this field to accept below scenario,

It should accept only positive numbers and min value is 0.5
It should accept values like 1.5, 0.5 but not values like 1.5.5, 12.5.6, -0.5

I have tried with below code but it is accepting multiple dots,

if ( (charCode != 46 && charCode > 31) && (charCode < 48 || charCode > 57)) {
        return false;
      }

Where's the code where you actually try to detect multiple dots? And what means "to give the data of number of minutes" ? — Roko C. Buljan
– Roko C. Buljan, Commented Feb 18, 2019 at 6:17
@RokoC.Buljan here is the code to detect multiple dots let df = questionDuration.toString(); let length = df.replace(/[^.]/g, "").length; if(length >1){ return false; } — Siva Kumar S
– Siva Kumar S, Commented Feb 18, 2019 at 6:19
It'm still not sure (since you mentioned minutes) what are all the valid input values... :\ — Roko C. Buljan
– Roko C. Buljan, Commented Feb 18, 2019 at 6:22
@RokoC.Buljan Input should accept values like 0.5,1 , 2.5 Input should not accept values like 0, -1, -2.5 — Siva Kumar S
– Siva Kumar S, Commented Feb 18, 2019 at 6:23

Roko C. Buljan · Accepted Answer · 2019-02-18 11:44:44Z

Using a function to test the input value:

function isInvalidInput (val) {
  return parseFloat(val) < 0.5 || isNaN(val);
}

console.log( isInvalidInput("-0.5") );   // true
console.log( isInvalidInput(-2) );       // true
console.log( isInvalidInput("1.2.5") );  // true
console.log( isInvalidInput("0.4") );    // true
console.log( isInvalidInput(0.4) );      // true
console.log( isInvalidInput("0.5") );    // false
console.log( isInvalidInput("1.2") );    // false
console.log( isInvalidInput("1000.9") ); // false
console.log( isInvalidInput(0.5) );      // false
console.log( isInvalidInput(0.999) );    // false

where parseFloat(val) < 0.5 (if necessary parses the string and) makes sure it's greater than 0.5 - disallowing negative values, and isNaN parses the string and checks if the format is a Number.

If the function raises atrue flag, the input is invalid.
If you want to invert the logic (like: isValidInput) than use return !( /*logic here*/ );

Using ES6 syntax:

const isInvalidInput = val => parseFloat(val) < 0.5 || isNaN(val);

Maheer Ali · Accepted Answer · 2019-02-18 06:47:38Z

0

You can prevent user from entering more than 1 . and - using e.preventDefault() in keydown event.

let input = document.querySelector('input');
input.addEventListener('keydown',(e) => {
  if((e.key === '.' && e.target.value.includes('.')) || e.key === '-'){
    e.preventDefault();
    console.log("Wrong Input")
  }
})
input.addEventListener('blur',(e) => {
   if(parseFloat(e.target.value) < 0.5) console.log("Input less than 0.5") 
})

<input id="main" type="number" min="0.5"/>

edited Feb 18, 2019 at 6:47

answered Feb 18, 2019 at 6:40

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Comments

guest271314 · Accepted Answer · 2019-02-18 07:17:50Z

0

You can min attribute value set to 0.5, RegExg /^\d+$|^\d+\.\d+$/ to match beginning of string one or more digits to end of string, or beginning of string one or more digit characters followed by dot character followed by one or more digit characters followed by end of string and check if .value is less than min attribute value at blur event handler,

<input 
  type="number" 
  min="0.5"  
  onblur="if(!/^\d+$|^\d+\.\d+$/.test(this.value)||this.value<this.min)this.value=''">

answered Feb 18, 2019 at 7:17

guest271314

1

Collectives™ on Stack Overflow

Javascript validation for input type number

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related