Change CSS of input number type based on input

Change CSS of input number type based on input

I'm not sure if what i'm asking is possible. But i can't find anything on Google to figure this out. Here's what i'm trying to do... I have 5 input tags, all of them are numbers. I want the border to become green if the value is a valid number(number within max/min value), if letters(or invalid numbers) are present, i want the border to become red. I tried to figure this out on my own yesterday, but cannot.

HTML

 window.onkeyup = function(e) {     var inputs = document.getElementsByClassName("C1");     for (i = 0; i < inputs.length; i++) {       inputsVal = inputs[i].value;       if (!inputsVal || inputsVal == "" || inputsVal == " ") {         return false       }     }     document.getElementById('enterSign').style.display = "block";     document.getElementById('spacer').style.display = "none";     if (event.which == 13) {       saveitem();     }   };

    Speed      
              
    Iron      
              
    Ice      
              
    Mass      
              
    Diameter      
              
          
      
Press Enter
                    

Currently, the code will return false unless all fields are entered. Then a div will appear that will instruct the user to press enter. But before that, i would like for users to get a sense of what information is valid before they move on to the next field. Thank you in advance to anyone that can both help me get this, and help me understand more about how to use JavaScript to handle these things. (please, no jquery or other libraries.) i'm trying to self learn JS.

Answer by Kryptik for Change CSS of input number type based on input

You should think about your whole approach, because in my opinion, looping through all your input elements onkeyup is unnecessary. Maybe use a focus out event or something similar.

But to answer your question, since you check the value of the input onkeyup, why not just manipulate the style of this element after you checked it:

window.onkeyup = function(e) {       var formValid = true;         var inputs = document.getElementsByClassName("C1");       for (i = 0; i < inputs.length; i++) {           inputsVal = inputs[i].value;           if (!inputsVal || inputsVal == "" || inputsVal == " ") {                formValid = false;                inputs[i].style.borderColor= "red";           } else {                inputs[i].style.borderColor= "green";           }       }         document.getElementById('enterSign').style.display = "block";       document.getElementById('spacer').style.display = "none";       if (event.which == 13) {           saveitem();       }         return formValid;  };  

But this will change the color of all your inputs at once, after every keypress.

Here is an example fiddle: https://jsfiddle.net/hu2amocq/

Another thing to mention: Since you're using input type="number" most browsers will add control buttons to the form element as you can see in the fiddle. Using these to increase / decrease the number won't trigger your window.onkeyup event.

---

Better approach

As i said at the beginning, you should think about your concept and only evaluate the input when necessary and only the one input which changed.

Take a look at http://www.w3schools.com/jsref/dom_obj_event.asp and use one of the events listed there. For example like this:

    validate = function(id) {        var input = document.getElementById(id);        var value = input.value.trim();        if (value && value.length > 0) {            document.getElementById(id).style.borderColor = "green";        } else {            document.getElementById(id).style.borderColor = "red";       }   }  

Answer by Matt Derrick for Change CSS of input number type based on input

https://jsfiddle.net/t3ktjez2/

You want to do something like this where you bind the event to each input so they handle themselves individually rather than looping over them on all on key press of the window.

var inputs = document.getElementsByClassName('C1');  for (var i = 0; i < inputs.length; i++) {      inputs[i].addEventListener("keyup", function(e) {          var input = e.target;          // Check for number          if (e.target.value) {              input.style.borderColor= "green";          } else {               input.style.borderColor= "red";          }      });     }  

Edit: In fact the most performant way to do this would be to let the keyup event bubble up to the #nav element and then do the check there.

https://jsfiddle.net/t3ktjez2/1/

This means you do not have to bind many events to each input and instead, have the one which checks to see which element caused the keyup event.

var nav = document.getElementById('nav');  nav.addEventListener("keyup", function(e) {      var el = e.target;      if (el.className === 'C1') {          // The element that trigger this event is an input so do check          if (el.value) { // Do a real value check here              el.style.borderColor = "green";          } else {              el.style.borderColor = "red";          }         }  });     

Answer by David Thomas for Change CSS of input number type based on input

One approach is the following:

window.onkeyup = function(e) {      // getting all the  elements with the class of 'C1':    var inputs = document.querySelectorAll('.C1'),      // variables for later use within the loop:      current, min, max, test;      // iterating over the  elements with a    // for loop:    for (var i = 0, len = inputs.length; i < len; i++) {        // caching the current  element:      current = inputs[i];        // getting the value of the min and max attributes,      // parsed as a number in base 10:      min = parseInt(current.min, 10);      max = parseInt(current.max, 10);        // testing whether the current value is      // equal to, or greater than, the min AND      // is equal to, or less than, the max:      isValid = current.value >= min && current.value <= max;        // if the current value is not the default value      // (so the user has made a change to the held value):      if (current.value !== current.defaultValue) {          // if the number is valid:        if (isValid) {            // we remove the 'invalid' class-name (if it's there):          current.classList.remove('invalid');            // we add the 'valid' class-name:          current.classList.add('valid');        } else {            current.classList.remove('valid');          current.classList.add('invalid');        }      }    }        document.getElementById('enterSign').style.display = "block";    document.getElementById('spacer').style.display = "none";    if (event.which == 13) {      saveitem();    }  };  

window.onkeyup = function(e) {      var inputs = document.querySelectorAll('.C1'),      current, min, max, test;      for (var i = 0, len = inputs.length; i < len; i++) {        current = inputs[i];        min = parseInt(current.min, 10);      max = parseInt(current.max, 10);        isValid = current.value >= min && current.value <= max;      if (current.value !== current.defaultValue) {        if (isValid) {          current.classList.remove('invalid');          current.classList.add('valid');        } else {            current.classList.remove('valid');          current.classList.add('invalid');        }      }    }        document.getElementById('enterSign').style.display = "block";    document.getElementById('spacer').style.display = "none";    if (event.which == 13) {      saveitem();    }  };

.valid {    border-color: limegreen;  }  .invalid {    border-color: red;  }

    Speed      
              
    Iron      
              
    Ice      
              
    Mass      
              
    Diameter      
              
    
    
Press Enter
          

JS Fiddle demo.

The above approach has the window 'listening' for the keyup interaction in order to provide the event-handling, which means that not only does that event have to propagate from the element all the way through each and every ancestor element before the function will be called, it's also possible to accidentally call event.stopPropagation() on one of the parent elements which, depending on the event-propagation being stopped, might prevent the function from ever being called.

You could, of course, attach the event-listener to a closer common ancestor to the elements, such as the parent

:

var commonAncestor = document.getElementById('nav');    commonAncestor.onkeyup = function(e) {   // ... all contents removed for brevity  };  

var commonAncestor = document.getElementById('nav');    commonAncestor.onkeyup = function(e) {      var inputs = document.querySelectorAll('.C1'),      current, min, max, test;      for (var i = 0, len = inputs.length; i < len; i++) {        current = inputs[i];        min = parseInt(current.min, 10);      max = parseInt(current.max, 10);        isValid = current.value >= min && current.value <= max;      if (current.value !== current.defaultValue) {        if (isValid) {          current.classList.remove('invalid');          current.classList.add('valid');        } else {            current.classList.remove('valid');          current.classList.add('invalid');        }      }    }        document.getElementById('enterSign').style.display = "block";    document.getElementById('spacer').style.display = "none";    if (event.which == 13) {      saveitem();    }  };

.valid {    border-color: limegreen;  }  .invalid {    border-color: red;  }

    Speed      
              
    Iron      
              
    Ice      
              
    Mass      
              
    Diameter      
              
    
    
Press Enter
          

JS Fiddle demo.

Or you could implement this functionality with CSS, using the :valid and :invalid selectors:

:valid {    border-color: green;  }  :invalid {    border-color: red;  }  

:valid {    border-color: green;  }  :invalid {    border-color: red;  }

    Speed      
              
    Iron      
              
    Ice      
              
    Mass      
              
    Diameter      
              
    
    
Press Enter
          

JS Fiddle demo.

There is, of course, the range selectors ? :in-range and :out-of-range ? which provide similar functionality as above:

:in-range {    border-color: green;  }  :out-of-range {    border-color: red;  }  

:in-range {    border-color: green;  }  :out-of-range {    border-color: red;  }

    Speed      
              
    Iron      
              
    Ice      
              
    Mass      
              
    Diameter      
              
    
    
Press Enter
          

JS Fiddle demo.

References:

• CSS:
  • validity selectors, :invalid and :valid.
• JavaScript:
  • Element.classList API.
  • for (initialisation; assessment; change) {...} loop.
  • HTMLInputElement - (limited) information for HTMLInputElement.defaultValue.
  • parseInt().

Answer by Peter Rasmussen for Change CSS of input number type based on input

First of all I would bind the events to the input fields instead of the window. This way you would not listen for every onkeyup event fired. Then you will have to get the min and max values, compare these and make the color (css/styling) changes.

Here is an incomplete example for you. By incomplete I mean that it does not take care of all scenarios - as an example using the up and down buttons and writing text instead of numbers. But it will give you an idea of how this could be implemented. It of course also does what you ask :)

Note: I created two css classes invalid and valid. I believe that styling should be done by css, and not javascript - classes are great for this.

var inputs = document.getElementsByClassName('C1');    for (var j = 0; j < inputs.length; j++){    var input = inputs[j];    input.addEventListener('keyup', function(e){      var ele = e.target;      var inputsVal = ele.value;        var min = parseInt(ele.getAttribute("min"));      var max = parseInt(ele.getAttribute("max"));        console.log(ele, inputsVal, min, max);      if (inputsVal && inputsVal <= max && inputsVal >= min) {        ele.classList.add('valid');        ele.classList.remove('invalid');      }else {        ele.classList.add('invalid');        ele.classList.remove('valid');      }    });  }  

var inputs = document.getElementsByClassName('C1');    for (var j = 0; j < inputs.length; j++){    var input = inputs[j];    input.addEventListener('keyup', function(e){      var ele = e.target;      var inputsVal = ele.value;            var min = parseInt(ele.getAttribute("min"));      var max = parseInt(ele.getAttribute("max"));            console.log(ele, inputsVal, min, max);      if (inputsVal && inputsVal <= max && inputsVal >= min) {        ele.classList.add('valid');        ele.classList.remove('invalid');      }else {        ele.classList.add('invalid');        ele.classList.remove('valid');      }    });  }

.invalid {   border-color:red;     }    .valid{    border-color:green;    }

    Speed      
              
    Iron      
              
    Ice      
              
    Mass      
              
    Diameter      
              
          
      
Press Enter
                    

Answer by Oposyma for Change CSS of input number type based on input

u can use jQuery and listen for blur on inputs

Fiddle

jQuery('input[type=number]').on('blur',function(){  var min = $(this).attr('min');  var max = $(this).attr('max');  if(min <= $(this).val() && $(this).val() <= max ) $(this).css('border','1px solid green');  });  

This is just suggestion :)

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72