How to show jquery error message on keyup

Question

I have a textarea that word count is limited to a maximum of 500. I want to check the word count value greater than 500 then show an error message below of that textarea

Now I got the correct word count but how to show the error message and stop to entering values.

html

<div class="">
   <div class="form-control-wrapper">
     <textarea name="project_desc" id="project_desc" class="form-control project_desc"  rows="6"><?php if(isset($project_desc)){ echo $project_desc; }?></textarea>
   </div>
</div>

jquery

$('#project_desc').keyup(function(e){

var value = $('#project_desc').val();
var length = value.trim().replace(/[\s]+/g, " ").split(" ").length;
if(length >= 500)
  {
    //show an error message ans stop entering values
  }
 });

its quite simple add a class error like this , $("#project_desc").addClass("error"); var str=$("#project_desc").val(); $("#project_desc").val(str.substr(0, 500) + '..'); — Yamen Nassif, Jul 31 '17 at 09:56
@YamenNassif https://stackoverflow.com/questions/8854288/val-vs-text-for-textarea — mplungjan, Jul 31 '17 at 09:57
Why didn't you use `maxlength` property ? `` holds only 500 char. — Ataur Rahman Munna, Jul 31 '17 at 10:03
@AtaurRahmanMunna because he wants the max **word count** to be 500, not the number of characters. But I see that almost everyone who has answered so far has missed that part :) — vi5ion, Jul 31 '17 at 10:09

mplungjan · Accepted Answer · 2017-07-31T12:04:50.083

Try something like this (note I set max 10 words for testing)

$(function() {
  $('.project_desc').on("input", function(e) {
    var value = this.value;
    var maxWords = $(this).attr("data-maxwords");
    var wordString = $.trim(value.replace(/[\s]+/g, " "));
    var numWords = wordString.length==0?0:wordString.split(" ").length;
    var tooLong = numWords > maxWords;
    
    if (tooLong) {
      var trimmed = value.split(/\s+/, maxWords).join(" ");
      // Add a space at the end to keep new typing making new words
      $(this).val(trimmed + " ");
      numWords = maxWords;
    }
    $(this).next(".project_desc_message").html("<br/>"+numWords+"/"+maxWords+" words")
  }).trigger("input");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="10" id="project_desc1" class="form-control project_desc" rows="6">this field has too many words in it from the server</textarea><span class="project_desc_message"></span>
  </div>
  <hr/>
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="20" id="project_desc2" class="form-control project_desc" rows="6"></textarea><span class="project_desc_message"></span>
  </div>
</div>

This is the older version from before I found the duplicate.

$(function() {
  $('.project_desc').on("input", function(e) {
    var value = $(this).val();
    var length = $.trim(value).replace(/[\s]+/g, " ").split(" ").length;
    var maxLength = $(this).attr("data-maxwords");
    var tooLong = length >= maxLength;
    $(this).next(".project_desc_error").html("<br/>Please enter max "+maxLength+" words").toggle(tooLong);
    if (tooLong) {
      this.value = $.trim(value).replace(/[\s]+/g, " ").split(" ").slice(0, maxLength).join(" ");
    }
  }).trigger("input");
});

.project_desc_error {
  display: none; color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="10" id="project_desc1" class="form-control project_desc" rows="6">this field has too many words in it from the server</textarea><span class="project_desc_error"></span>
  </div>
  <hr/>
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="20" id="project_desc2" class="form-control project_desc" rows="6"></textarea><span class="project_desc_error"></span>
  </div>
</div>

okey..but stop further entering..here we can enter values after the limit reached — robins, Jul 31 '17 at 10:11
The test should block more words - I had to run so perhaps I missed something — mplungjan, Jul 31 '17 at 10:14
its working well.can i generalize this.i have 5 textareas with different word count limit — robins, Jul 31 '17 at 10:29
Please see update for a generalised version with too much data from server too — mplungjan, Jul 31 '17 at 11:17

score 0 · Answer 2 · answered Jul 31 '17 at 09:59

You can use $('#project_desc').val(value.slice(0,-1)) to remove the last type character when inside your error state.

This $(this).after('<div class="error">this is your error.</div>') will add an error message after your textarea

Please note that I reduced the word count in the example below.

$('#project_desc').keyup(function(e) {

  var value = $('#project_desc').val();
  var length = value.trim().replace(/[\s]+/g, " ").split(" ").length;
  if (length >= 3) {
    $('#project_desc').val(value.slice(0, -1))
    if ($(".error").length == 0) {
      $(this).after('<div class="error">this is your error.</div>')
    }
  } else {
    $(".error").remove()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" id="project_desc" class="form-control project_desc" rows="6"></textarea>
  </div>
</div>

Kamran Jabbar · Answer 3 · 2017-07-31T10:12:02.113

0

Try the below code.

$('#project_desc').keyup(function(e){
     var max=5;
     if (e.which < 0x20) {
        // e.which < 0x20, then it's not a printable character
        // e.which === 0 - Not a character
        return;     // Do nothing
    }
    if (this.value.length == max) {
        e.preventDefault();
    } else if (this.value.length > max) {
        // Maximum exceeded
        this.value = this.value.substring(0, max);
    }

var value = $('#project_desc').val();
var length = value.trim().replace(/[\s]+/g, " ").length;



if(length >= 500)
  {
    $("#error").show();
  }
  else{
    $("#error").hide();
  }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
   <div class="form-control-wrapper">
     <textarea name="project_desc" id="project_desc" class="form-control project_desc"  rows="6"></textarea>
     <span style="color:red;display:none" id="error">
      Limit Exceeded
     </span>
   </div>
</div>

edited Jul 31 '17 at 10:12

answered Jul 31 '17 at 10:01

Kamran Jabbar

858
7
21

its okey.but i need to prevent entering values – robins Jul 31 '17 at 10:05
Check now. Please – Kamran Jabbar Jul 31 '17 at 10:12
Set max variable to 500. – Kamran Jabbar Jul 31 '17 at 10:12
For more details, refer to this to prevent length http://jsfiddle.net/3uhNP/1/ – Kamran Jabbar Jul 31 '17 at 10:22
500 words. Not 500 chars – mplungjan Jul 31 '17 at 11:21
Refer to this please. http://jsfiddle.net/7DT5z/9/ – Kamran Jabbar Jul 31 '17 at 11:40
Why not post that code then It is much more elegant - assuming it is your code – mplungjan Jul 31 '17 at 11:42
If solution already exist in web I think so then it is not necessary to post the code. – Kamran Jabbar Jul 31 '17 at 11:44

Milan Chheda · Answer 4 · 2017-07-31T11:23:03.350

You can have a real-time counter that would show the number of characters. And on submit of this form, you can check the value of count, if its less than 0, do not allow the form to submit.

maxWords = 500;

$('#count').text(maxWords);

$('#project_desc').bind('keyup keydown', function() {
  var count = $('#count');
  var valueEntered = $(this).val()
  var characters = valueEntered.trim().replace(/[\s]+/g, " ").split(" ").length;

  if (characters > maxWords) {
    count.addClass('over');
  } else {
    count.removeClass('over');
  }

  count.text(maxWords - characters);
});

#projecterror {
  display: none
}

.over {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" id="project_desc" class="form-control project_desc" rows="6"></textarea>
  </div><span id="projecterror">Please enter only 500 words</span>
</div>
<p>
  <strong>You have <em id="count"></em> characters remaining</strong>
</p>

Will change the variable name. – Milan Chheda Jul 31 '17 at 11:22 — Milan Chheda, Jul 31 '17 at 11:22

score -1 · Answer 5 · answered Jul 31 '17 at 09:57

-1

 $("#txtPostBody").on("input", function () {
            $("#PostBodyCount").text('Count : ' + this.value.length);

            if (this.value.length > 158) {
                $("#txtPostBody").css('border-color', 'red');
            }
            else {
                $("#txtPostBody").css('border-color', '');
            }
        });

Use this one.

answered Jul 31 '17 at 09:57

Neeraj Pathak

759
4
13

500 words. Not 500 chars – mplungjan Jul 31 '17 at 11:19

score -1 · Answer 6 · answered Jul 31 '17 at 10:04

-1

remove split(" ") :

$('#project_desc').keyup(function(e){
var value = $('#project_desc').val();
var length = value.trim().replace(/[\s]+/g, " ").length;
if(length >=500)
 {
   //show an error message ans stop entering values
 }
});

answered Jul 31 '17 at 10:04

andreas karimi

182
7

i tested it and work – andreas karimi Jul 31 '17 at 10:05
Where is the error message? – mplungjan Jul 31 '17 at 11:19

Ankit Singh · Answer 7 · 2017-07-31T10:28:56.030

Hope this will work for you. Reference taken from How to prevent user to enter text in textarea after reaching max character limit

Try this:

jQuery(document).ready(function($) {
    var max = 10;
    $('textarea#project_desc').keypress(function(e) {
        if (e.which < 0x20) {
            return;     // Do nothing
        }
        myval = $(this).val().trim().replace(/[\s]+/g, " ").split(" ").length;
        if (myval >= max) {
            e.preventDefault();
            $('.limittext').show();
        } else if (myval > max) {
            this.value = myval.substring(0, max);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
   <div class="form-control-wrapper">
     <textarea name="project_desc" id="project_desc" class="form-control project_desc"  rows="6"></textarea><span class="limittext" style="display:none;">Limit reached</span>
   </div>
</div>

500 words. Not 500 chars - you count words but limit on chars — mplungjan, Jul 31 '17 at 11:19

Anand Pandey · Answer 8 · 2017-07-31T09:59:08.740

-2

Try this

 $('#project_desc').keyup(function(e){

  var value = $(this).val(); // if it is not worked than try
  var value = $(this).text(); //if not work upper condition
  var length = value.trim().replace(/[\s]+/g, " ").split(" ").length;
  if(length >= 500)
  {
    alert('You cant write anymore');
    e.preventDefault();

  }
 });

edited Jul 31 '17 at 09:59

answered Jul 31 '17 at 09:55

Anand Pandey

2,025
3
20
39

my question is how to show an error message in that particular condition – robins Jul 31 '17 at 09:55
What is the difference? – Ankit Singh Jul 31 '17 at 09:56
can you try this? – Anand Pandey Jul 31 '17 at 09:59

How to show jquery error message on keyup

8 Answers8