Search code examples
javascriptvalidationinputuser-input

Javascript form input value comparison to input max

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. enter image description here

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?

Solution

  • just put parseInt in your if condition like 

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

    it works properly.