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
– Mark Baijens, Commented Sep 20, 2018 at 11:36

Anki · Accepted Answer · 2018-09-20 11:42:55Z

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, 2018 at 11:42

answered Sep 20, 2018 at 11:37

Anki

4173 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Dudharejiya · Accepted Answer · 2018-09-20 11:40:54Z

2

just put parseInt in your if condition like

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

it works properly.

answered Sep 20, 2018 at 11:40

Rahul Dudharejiya

3754 silver badges16 bronze badges

2 Comments

Clint_A Over a year ago

Thanks. This worked. It hadn't actually crossed my mind to parse the values to integers.

Rahul Dudharejiya Over a year ago

Welcome, it happens some times. :)

Mark Baijens · Accepted Answer · 2018-09-20 11:51:24Z

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">

Collectives™ on Stack Overflow

Javascript form input value comparison to input max

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related