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;
      });
    };
};

check the snippet I included, there are many small issues :) — xShirase, Dec 02 '16 at 08:58
Related: http://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css — , Dec 02 '16 at 09:13
You are also logging the word "charCount" and not the variable. — Imbue, Dec 02 '16 at 11:07

Tintu C Raju · Accepted Answer · 2016-12-02T09:44:37.757

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/

score 1 · Answer 2 · 2016-12-02T11:00:10.217

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.

Very smart way to handle it! But OP needs charcount anyway I think. — xShirase, Dec 02 '16 at 09:49

score 0 · Answer 3 · answered Dec 02 '16 at 08:41

0

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.

answered Dec 02 '16 at 08:41

Andrea

6,032
2
28
55

he uses charcount to display the charcount in his html, so it's probably best that way – xShirase Dec 02 '16 at 08:42

xShirase · Answer 4 · 2016-12-02T08:57:34.570

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.

Checking for an empty string in a javascript textarea

4 Answers4