Javascript can't change empty string color

Question

Changing of the Firstname's color only works when the string is not empty, It will turn green if there's text but it won't turn red when it's an empty string. How would I be able to do this?

    $(document).on("click", '.btn-info.mailContact', function() {
      values = {
        MailTo: $('.Emailadres').val(),
        FirstName: $('.Firstname').val(),
        Onderwerp: $('.Subject').val(),
        Email: $('.Emailadres').val(),
        Tel: 'n.v.t.',
        Text: $('.TheMessage').val(),
        Comment: 'Comment'
      };
      if ($('.Firstname').val() != "" && $('.Subject').val() != "" &&
        $('.TheMessage').val() != "" && $('.Emailadres').val() != "") {
        State.sendContactMail(values);
        window.location.href = '/confirmation';
      } else {
        if (FirstName != "") 
          FirstName.style.color = "green";
        else
          FirstName.parents.style.color = "red";
    
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2" >
  <strong class="FirstnameTitle"> 
    <span class="text-danger">*</span>
    Naam: 
  </strong>
</div> 
<div class="col-md-10"> 
  <input autofocus="autofocus" required="required" type="text" 
         class="form-control Firstname" id="FirstName" placeholder="Vul je naam hier in"/>
</div>

@ScottMarcus it is done for when someone fills it in, that the text will then be red — Brian Boddaert, Aug 11 '17 at 13:06
What is FirsName in your example, did you declare the variable somewhere outside of this code? — Axnyff, Aug 11 '17 at 13:07
Potential duplicate of - https://stackoverflow.com/questions/45635974/javascript-cant-change-empty-string-color — Rohith, Aug 11 '17 at 13:09
the css style "color" changes the color of the font. A font is used on letters. If the string is empty what do you set color to? You probably want to set the background-color in that case and probably set a width to it. — user5014677, Aug 11 '17 at 13:12
@Rohith You've marked this question as a possible duplicate of itself. — Scott Marcus, Aug 11 '17 at 13:13
I think what you are looking for is a border color change and not the text color change. Correct me if I am wrong. So in that case you would need something like `$('.Firstname').css('border','1px solid red')` — Rajshekar Reddy, Aug 11 '17 at 13:20
You did provide **some** HTML, but your JS code only works when an element matching this: `.btn-info.mailContact` is clicked and you didn't provide any HTML for such an element. You also need to provide the HTML for the other elements referenced by your JS so that we can see a running example of what you are seeing. — Scott Marcus, Aug 11 '17 at 13:47

Scott Marcus · Accepted Answer · 2017-08-11T13:43:26.903

The CSS color property affects the foreground color of the element it is applied to. With elements that contain text (strings), the color is applied to the characters. When there are no characters (empty string) there is nothing to apply a color to, so you don't see any color.

You can apply a background-color to an element to see the space it occupies on the page filled in with a color. However, with inline elements (i.e. <span>, <a>), their width is determined by their content size, so if they are empty, they will have no size to fill in. Similarly with block level elements (i.e. <div>, <section>), their height is determined by their content, so if there is no content, there is no height. However, with both inline and block elements, you can manually set a size (inline elements will have to be set to display:inline-block) to "hold" the element open. Once a non-zero size is set, a background color can be seen. Form elements (that have a defined size by default) can be styled to have a background color without concern for whether they have content or not.

Here's an example:

var t = document.getElementById("txt");

t.addEventListener("input", function(){

  t.style.backgroundColor = t.value === "" ? "#f00" : "#0f0";
 
});

Type some characters and then delete them:
<input type="text" id="txt">

Also, keep in mind that simple visual styling based on an empty field can be accomplished without JavaScript by adding the HTML required attribute and just then using CSS :valid and :invalid pseudo-classes, like this:

#txt:valid { background-color:#0f0; }
#txt:invalid { background-color:#f00; }

Type some characters and then delete them: <input type="text" id="txt" required>

Thanks lots, this did the trick! To my confusion and surprise I could even change the color instead of background color this way. Who would have thought this many people were ready to lend a helping hand to a stranger. — Brian Boddaert, Aug 11 '17 at 14:05
Only the 'Text: $('.TheMessage').val(),' segment i was unable to adjust color from. It is a textarea instead of an input — Brian Boddaert, Aug 11 '17 at 14:07
@BrianBoddaert if this answer solved your problem, be sure to upvote it and accept it as the solution. You'll always find plenty of folks here ready to help out – just don't be discouraged by the haters. Unfortunately, you'll find them everywhere because it's the internet. Welcome to Stack Overflow! :-) — jeffdill2, Aug 11 '17 at 14:14
@BrianBoddaert *To my confusion and surprise I could even change the color instead of background color this way.* You can change any CSS property(ies) you like in a given situation, but whether they have any visible effect is going to be based on what that specific property applies to. Good luck! — Scott Marcus, Aug 11 '17 at 15:44

score 0 · Answer 2 · answered Aug 11 '17 at 13:14

...

FirstName: $('.Firstname').val(),

...

FirstName.style.color = "green";

A couple of things are wrong here:

You've got FirstName defined as a property of the values object literal but when you're trying to set the color, you're only calling FirstName, not values.FirstName.
You're trying to set the color on $('.Firstname').val(), which is just a string. You need to set the color on the actual element – $('.Firstname').css('color', 'green').

score 0 · Answer 3 · answered Aug 11 '17 at 15:06

0

What you want to do is to change the placeholder colors. Just check this answer on how to do it ;) https://stackoverflow.com/a/2610741/5463835

answered Aug 11 '17 at 15:06

Anderson Ivan Witzke

1,537
1
15
24

Javascript can't change empty string color

3 Answers3