Question: I have an textarea on a webpage, and I want to have a border around it when the string is empty. But it only works if I put something into the text and then delete it again. How can I make the border visible before I write in the textarea? Here is the code:

```
$("#message-box").on("keyup", function(){
    var charCount = $("#message-box").val().length;
    console.log("charCount");
    $("#char-count").html(charCount);

    if (charCount === "") {
      $("#message-box").css("border", "10px solid red");
    }else{
      $("#message-box").css("border", "");
          //event listener
      $("#submitbutton").on('click', function() {
        var comment = $("#message-box").val();
        $("#visible-comment").html(comment);
        $("#message-box").hide();

        console.log(comment);
        return false;
      });
    };
};

```

Answer: 
Please check you have some syntax errors. 

`$("#message-box").on(` this section is not closed with `);`

Also seperate the event `$("#submitbutton").on('click', function()` 

also `charCount = $("#message-box").val().length;` will return a number even if the text area is empty it give `0`. so you need to check it as

`if (charCount==0)`

So your final code become 

```
$("#message-box").on("keyup", function(){
    var charCount = $("#message-box").val().length;
    console.log("charCount");
    $("#char-count").html(charCount);

    if (charCount==0) {
      $("#message-box").css("border", "10px solid red");
    }else{
      $("#message-box").css("border", "");
          //event listener
    };
});

$("#submitbutton").on('click', function() {
var comment = $("#message-box").val();
$("#visible-comment").html(comment);
$("#message-box").hide();

console.log(comment);
return false;
});

```

<https://jsfiddle.net/tintucraju/08dp6ra5/2/>
No need for code to handle this--use CSS [`:invalid`](https://developer.mozilla.org/en/docs/Web/CSS/:invalid) pseudo-class, together with the [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-required) attribute:

```css
textarea:invalid { border: 10px solid red; }
```

```html
<textarea required></textarea>
```

Alternatively, use the [`:placeholder-shown`](https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown) pseudo-class, together with the [`placeholder`](https://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-placeholder) attribute:

```css
textarea:placeholder-shown { border: 10px solid red; }
```

```html
<textarea placeholder="Type here"></textarea>
```

To get charcount:

```
const messageBox     = document.getElementById('message-box');
const charCount      = document.getElementById('char-count');
const visibleComment = document.getElementById('visible-comment');

messageBox.addEventListener('input', () => {
  charCount.textContent      = messageBox.value.length;
  visibleComment.textContent = messageBox.value;
});

```

Note that using the [`input`](https://developer.mozilla.org/en-US/docs/Web/Events/input) event is preferable to `keyup`, since the latter might not handle cases such as dragging and dropping text into the textarea. To place the comment into the `visible-content`, instead of using `innerHTML` (or Jquery's `.html()`, which is the same thing), use [`textContent`](https://developer.mozilla.org/en/docs/Web/API/Node/textContent) (or `.text()`); otherwise, HTML characters such as `<` in the input will be interpreted as HTML and could corrupt the output.