I have a content-editable div that works as Textarea.

<div id="divThatYouCanWriteStuffIn" contenteditable="true" class="ibox-content col-lg-12">
</div>

Now I want check whether this div is empty or not, for validations.

What I used is as below.

 if ($('#divThatYouCanWriteStuffIn')[0].innerText == "") {
        alert("Please update your wall, then post.")
        return false;
  }

But it's not working if user just clicked enter in div. Same way I have used

 if ($('#divThatYouCanWriteStuffIn')[0].innerText.length <= 1) {
        alert("Please update your wall, then post.")
        return false;
    }

$('#divThatYouCanWriteStuffIn').html()

But it also has break tags inside div, as it takes blank as break

So, is there any way to check that editable div is not empty and has some proper text?

I have a content-editable div that works as Textarea.

<div id="divThatYouCanWriteStuffIn" contenteditable="true" class="ibox-content col-lg-12">
</div>

Now I want check whether this div is empty or not, for validations.

What I used is as below.

 if ($('#divThatYouCanWriteStuffIn')[0].innerText == "") {
        alert("Please update your wall, then post.")
        return false;
  }

But it's not working if user just clicked enter in div. Same way I have used

 if ($('#divThatYouCanWriteStuffIn')[0].innerText.length <= 1) {
        alert("Please update your wall, then post.")
        return false;
    }

$('#divThatYouCanWriteStuffIn').html()

But it also has break tags inside div, as it takes blank as break

So, is there any way to check that editable div is not empty and has some proper text?

• javascript
• jquery

• jsfiddle/k2667f5q – Rajaprabhu Aravindasamy Commented May 6, 2016 at 10:04
• FYI, by definition, any white space makes it not empty. What you want is to trim its content. BUT what about any empty/void HTML element inside this contenteditable div? Are you considering it as empty or not??? Now why don't you use a textarea? contenteditable cannot be used as teaxtarea replacement for many many reasons, especially because different browser support/behaviour – A. Wolff Commented May 6, 2016 at 10:04
• @A.Wolff first i cannot use textarea as it width is fixed..and second if there is no text then all html tags not needed so, it must act as blank..and thanks for your support. – Bharat Commented May 6, 2016 at 10:08
• @Bharat first i cannot use textarea as it width is fixed.. I'm not sure what you mean?! .and second if there is no text then all html tags not needed so, it must act as blank.. Still, i don't understand what you mean?! Can you provide concrete sample replicating your issue pare to expected behaviour? – A. Wolff Commented May 6, 2016 at 10:14
• sure.................. – Bharat Commented May 6, 2016 at 10:14

2 Answers 2

You can use the text() method to get the relevant content(content without html tags)

  if ($('#divThatYouCanWriteStuffIn').text().trim().length == 0) {
    alert("empty");
  }

.trim() function removes all the white spaces and newline characters from the beginning and end of the content.

Fiddle

Incase your contenteditable div contains html. I used this method below

divHtml = $('div#divThatYouCanWriteStuffIn').html();
checkEmpty = divHtml.replace(' ', '').replace('<br>', '');
if(checkEmpty.length == 0){
    alert('empty');
}

Replace all space with nothing and all line breaks <br> with nothing also