Javascript form input value comparison to input max

Question

I have a <form> where I'm trying to compare the value and the max of an input so that if the value exceeds the max I'd apply different styling to the input (like a red border). Suppose I have an input like this:

<input id="inp_1" type="text" numeric-only="" max="50">

And let's assume I have three input values (9, 49 and 59). I'll come back to this is in a moment.

This is my js code that acquires the input and checks on the value and max:

var activeInpId = document.activeElement.id;
var activeInpVal = document.activeElement.value;
var activeInpMax = document.activeElement.max;
var pickElement = document.getElementById(activeInpId);
//console 1
console.log("The entered value is (" + activeInpVal + ") and it's max is (" + activeInpMax + ")");

if( activeInpVal > activeInpMax ){
   //console 2
   console.log("Error. Value (" + activeInpVal + ") exceeds max (" + activeInpMax + ")");

   pickElement.style.border = '2px solid';
   pickElement.style.outline = 'none';
   pickElement.style.borderColor = '#E60000';
   pickElement.style.boxShadow = '0 0 10px #E60000';
}else{
   console.log("Current value in range");

   pickElement.style.border = '';
   pickElement.style.outline = '';
   pickElement.style.borderColor = '';
   pickElement.style.boxShadow = '';
}

Problem

Now when I enter my input values 49 or 59 everything works fine but 9 acts as an error. Here's a screenshot of all 3 scenarios.

Moreover the console messages in the code above outputs

The current value in focus is (9) and it's max is (50) for console 1, and

Error. Value (9) exceeds max (50) for console 2.

What could I be missing or doing wrong?

How do you initiate the check? Can you please create a working code snippet? — Mark Baijens, Sep 20 '18 at 11:36

Anki · Answer 1 · 2018-09-20T11:42:55.340

3

So here the concept is if we do

console.log( '9' > '50'); //logs true
console.log( 9 > 50);    //logs false

so all you need to do to type cast values to integer before comparison.

edited Sep 20 '18 at 11:42

answered Sep 20 '18 at 11:37

Anki

407
3
8

score 2 · Accepted Answer · answered Sep 20 '18 at 11:40

2

just put parseInt in your if condition like

if( parseInt(activeInpVal) > parseInt(activeInpMax) )

it works properly.

answered Sep 20 '18 at 11:40

Rahul Dudharejiya

355
3
16

Thanks. This worked. It hadn't actually crossed my mind to parse the values to integers. – Clint_A Sep 20 '18 at 11:46
Welcome, it happens some times. :) – Rahul Dudharejiya Sep 20 '18 at 11:58

score 1 · Answer 3 · answered Sep 20 '18 at 11:51

You need to parse the the strings to integers to be able to compare them using >

var inputs = document.querySelector(".input");
inputs.addEventListener("input", validate, false);

function validate(){
  addEventListener("input", function() {
    var activeInpId = document.activeElement.id;
    var activeInpVal = document.activeElement.value;
    var activeInpMax = document.activeElement.max;
    var pickElement = document.getElementById(activeInpId);
    //console 1
    console.log("The entered value is (" + activeInpVal + ") and it's max is (" + activeInpMax + ")");
    console.log(typeof activeInpVal);
    console.log(typeof activeInpMax);
    if (parseInt(activeInpVal) > parseInt(activeInpMax)) {
      //console 2
      console.log("Error. Value (" + activeInpVal + ") exceeds max (" + activeInpMax + ")");

      pickElement.style.border = '2px solid';
      pickElement.style.outline = 'none';
      pickElement.style.borderColor = '#E60000';
      pickElement.style.boxShadow = '0 0 10px #E60000';
    } else {
      console.log("Current value in range");

      pickElement.style.border = '';
      pickElement.style.outline = '';
      pickElement.style.borderColor = '';
      pickElement.style.boxShadow = '';
    }
  });
}

<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">

Javascript form input value comparison to input max

3 Answers3