Limit the Number of Characters In a Textarea or Textfield Using jQuery

It’s very easy to limit the number of characters you want a user to submit with JQuery, you would of course still have to validate with a server-side language, but that’s another story.

After reading this tutorial you will minutes away from completing a twitter clone (just kidding).

The Interface

Let’s make a twitter like form, that is just a textbox and its submit button. Am going to give the textbox the id “status”.

<form>
<textarea id="status">
</textarea>
<button type="submit">Submit</button>
</form>

Am also going to want a response div, where I let the user know if he/she exceeded the allowed number of characters, and another div withe the id “status-list” where I will add the user’s new status post.

<div id="response"></div>
<form>
<textarea id="status">
</textarea>
<button type="submit">Submit</button>
</form>

<div id="status-list">

</div>

The Handling of The Form

Am going to need five variables in my javascript code.

var status; // will hold the status text
var allowed_number=140; // allowed number of characters
var number_over; // status length minus allowed_number
var text_box=$("textarea#status"); // holds textarea object
var response=$("div#response"); // holds response div object

The way my validation works is like this:

  1. User types
  2. Submits form
  3. jQuery trims the white spaces from textarea value
  4. assign trimmed text to variable status
  5. check length
  6. if the number of characters was exceeded show error message, back to 1
  7. else do something with the status (submit to a database)
  8. prepend the new status to the user list

All those steps are summarized in this beautiful piece of code:

	$('form').submit(function(){
		status=$.trim(text_box.val());
		
		if(status.length>allowed_number)
		{
			number_over=status.length-allowed_number;
			response.html('You exceeded the limit of allowed characters by '+number_over);
		}
		else
		{
			// do something with status
			$('#status-list').prepend('<p>'+status+'</p>');
		}
		return false;
	});

"Why does your form return false?" you ask, well am assuming that you want to use AJAX to submit the status to a database or some place else.

If instead you want to use the classic method of submitting forms (reloading the/another page) you would only return false if the limit of characters was exceeded, otherwise return true.

The Full Script

And here is the full script for those who hate to read.

<html>
<body>

<div id="response"></div>
<form>
<textarea id="status">
</textarea>
<button type="submit">Submit</button>
</form>

<div id="status-list">

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var status;
var allowed_number=140;
var number_over; // status length minus allowed_number
var text_box=$("textarea#status");
var response=$("div#response");

	$('form').submit(function(){
		status=$.trim(text_box.val());
		
		if(status.length>allowed_number)
		{
			number_over=status.length-allowed_number;
			response.html('You exceeded the limit of allowed characters by '+number_over);
		}
		else
		{
			// do something with status
			$('#status-list').prepend('<p>'+status+'</p>');
		}
		return false;
	});
});
</script>
</body>
</html>
blog comments powered by Disqus