Checking for an empty string in a javascript textarea

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 1

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/

Answer 2

No need for code to handle this--use CSS :invalid pseudo-class, together with the required attribute:

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

 <textarea required></textarea> 

Alternatively, use the :placeholder-shown pseudo-class, together with the placeholder attribute:

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

 <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 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 (or .text() ); otherwise, HTML characters such as < in the input will be interpreted as HTML and could corrupt the output.

Answer 3

I think your test doesn't work if there's no value previously inserted.

You could do

if ($("#message-box").val() == undefined || $("#message-box").val().length == 0)

instead of

if (charCount === "") {

to also check if the value exists at first.

Answer 4

 function checkCharCount(){ charCount = $("#message-box").val().length; $("#char-count").html(charCount); if (charCount === "") { $("#message-box").css("border", "10px solid red"); }else{ $("#message-box").css("border", ""); } } $("#message-box").on("keyup", function(){ checkCharCount(); }); $("#submitbutton").on('click', function() { var comment = $("#message-box").val(); $("#visible-comment").html(comment); $("#message-box").hide(); console.log(comment); return false; }); checkCharCount(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="message-box"></textarea> <span id="char-count"></span> 

You are defining your borders within the "keyup" event listener, which is why it works only after you enter/delete characters. Making the charcheck into a function allows you to avoid repetitions.

In addition there was a few typos.