My input doesn't want to color it self in red when the value is nothing

Question

Problem

My problem is the following... I have an input which after being validated for correct information colors itself in red. I use the attribute oninput to make it color back in white once I type a letter. In the function though, I also state that if the value of the input is nothing that it should color back to red but this part doesn't work, why is that?

My HTML:

<input oninput="validateInput (this)">

My Css:

input {background-color: red}

My JavaScript:

function validateInput (a) {
    if (a.value == '') return;
    a.style.cssText = 'background-color: #fff';
}

Note that this is my code simplified, there are way more functions and attributes inside the input and in my css which I just think are unnecessary to put in!

Your css is setting the color; the javascript is setting the background-color. Which one are you trying to set? — Daniel Beck, Nov 28 '17 at 16:31
And, you are setting the background to white, which it is by default, so you wouldn't notice a change. — Scott Marcus, Nov 28 '17 at 16:32
My mistake since i simplified the code I accidentally wrote color instead of background-color... Ill fix it. — , Nov 28 '17 at 16:33

Scott Marcus · Answer 1 · 2017-11-28T16:40:27.400

You need to use colors that will be noticable. Setting a white background on an element that, by default, has a white background isn't going to do that.

Also, your CSS sets the text color to red all the time, not just when the field is empty.

Additionally (and not part of your issue directly), don't use inline HTML event attributes (onclick, oninput, etc.). There are many reasons not to use this old technique that just won't go away. Do all your event binding with modern standards-based code in JavaScript.

Lastly, it's much simpler and more scalable to apply and remove classes to elements than to set individual styles. That can be done easily with .classList.add, .classList.remove and classList.toggle.

Try something like this:

// Get your reference to the element you want to work with:
var input = document.querySelector(".validate");

// Set up the event handler(s). In this case, we want the field
// to undergo validation as the user enters data or if the user
// leaves the field
input.addEventListener("input", validateInput);
input.addEventListener("blur", validateInput);

function validateInput() {
    if (input.value === '') {
      input.classList.add("invalid");
      input.classList.remove("valid");      
    } else {
      input.classList.remove("invalid");
      input.classList.add("valid");      
    }
}

.invalid { 
   color: red;
   background-color:yellow;
}

.valid {
   color: blue;
   background-color:aliceblue;  
}

<p>Type in the box, then backspace out all the data or just click in the box without typing and hit TAB</p>
<input class="validate">

I didn't copy your code but looked at the logic and fixed my problem. I will edit my post and explain the answer but still thank! — , Nov 28 '17 at 16:40

score 1 · Answer 2 · answered Nov 28 '17 at 16:46

1

try with this, this functioned for me.

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
    input {background-color: red}
</style>
</head>
<body>
<input oninput="validateInput (this)">
<script type="text/javascript">
function validateInput (a) {
    console.log(a.value.length)
    if (a.value != ''){
        a.style.cssText = 'background-color: #fff';
    }else{
        a.style.cssText = 'background-color: red';
    }

}
</script>
</body>
</html>

answered Nov 28 '17 at 16:46

Hugo Valenza M

169
1
6

Good answers on Stack Overflow include, not only working code, but an explanation of what the problem was and why/how your code solves it. Including links for further reading is also welcomed. An answer that just shows working code is likely to get down voted. – Scott Marcus Nov 28 '17 at 17:18

Daniel Beck · Accepted Answer · 2017-11-28T16:42:25.897

0

Your current code changes the background color if there is input, but just returns doing nothing when there is no input. That doesn't reset the input to its default CSS color, it just does nothing.

Instead you need to actively change the color on both case:

function validateInput (a) {
    if (a.value == '') {
      a.style.cssText = "background-color: red";
    } else {
      a.style.cssText = 'background-color: #fff';
    }
}

input {background-color: red}

<input oninput="validateInput (this)">

(As mentioned in @ScottMarcus's answer, though this isn't directly relevant to your question, it's preferable to define event handlers in javascript rather than inline; instead of an "oninput" attribute consider switching to addEventListener().)

edited Nov 28 '17 at 16:42

answered Nov 28 '17 at 16:39

Daniel Beck

20,653
5
38
53

Yes this does work and thank you. Unfortunately I got my answer form the person above, a looked at the code logic and pretty much wrote the code you did, after all I think for people having the same problem they can copy your code and thus you win the answer mark! – Nov 28 '17 at 16:42
To be honest, @ScottMarcus's answer is probably better from a best-practices standpoint (I tend not to change things that aren't directly relevant to the question being asked, but if I were writing this from scratch I'd follow his advice.) – Daniel Beck Nov 28 '17 at 16:57

score 0 · Answer 4 · answered Nov 28 '17 at 16:47

onkeyup event shall be used as it will be triggered after entry of the pressed key into the input field. Also, backgroundColor property has to be set when value is empty (just in case the user after entering some characters, deletes the entered characters).

<html>
  <head>
  <script>
    function validateInput(a) {
        if (a.value == '')
        {
            a.style.backgroundColor = "red";
        }
        else
        {
            a.style.backgroundColor = "#FFFFFF";
        }
        return true;
    }
  </script>
  <style>
    input {background-color: red;}
  </style>
  </head>
  <input onkeyup="validateInput(this);"/>
</html>

`oninput` fires whenever the input value changes, which is sufficient. There's no reason to change the event to `onkeyup`. — Daniel Beck, Nov 28 '17 at 16:55

My input doesn't want to color it self in red when the value is nothing

4 Answers4