Plugin Planet

Complete guide to setting minimum and maximum (min and max) limits on the number of words or characters for the main content field, default text-input fields, or any textarea.

Limit characters globally

USP Pro provides a global setting for maximum characters that will serve as the default value for all USP Forms. To set this global/default value, visit General settings and then specify values for the following options:

• Minimum Character Limit – sets the global minimum character limit
• Maximum Character Limit – sets the global maximum character limit

For either of these settings, you can use 0 for no limit¹. The global max-character setting applies to the main post-content textarea, and all primary text inputs. Here is a list of fields that use the global max-character setting as the default value for the maxlength attribute:

[usp_name]
[usp_url]
[usp_title]
[usp_captcha]
[usp_content]
[usp_files]
[usp_email]
[usp_subject]
[usp_tags]

You can adjust the max-character values for any of these fields as explained next.

¹ Technically, using a value of 0 for the global max-character setting setting means that text will be limited to 999,999 characters.

Limit characters locally

You can override the max-character setting for any of the following fields:

[usp_name]
[usp_url]
[usp_title]
[usp_captcha]
[usp_content]
[usp_files]
[usp_email]
[usp_subject]
[usp_tags]
[usp_custom_field]

To set a local character limit for any of these fields, add the max attribute and give it any non-zero value. For example, to add a max value for the post-content area, you can do this:

[usp_content max="999"]

Just change the number to whatever works for you.

Likewise for setting a required minimum number of characters, you can add the min attribute to supportive fields. Check out the USP Pro Shortcodes Reference to see which fields support max and min attributes.

Custom Fields

To add a max value to any custom field, include maxlength directly in the custom-field definition and give it any non-zero value, for example:

data-required#true|maxlength#999

You can change the number to whatever works best.

Count and Limit Words with jQuery, Display Word Count

Another way of limiting the amount of “stuff” that users can add to any textarea is to use a slice of jQuery. The following example demonstrates how to add a word counter to the form, and also limit the number of words that may be added.

First, make sure you have a content area or other textarea added to the form. Here we are using the default content field via shortcode:

[usp_content]

Then, add the following code to the form, after the content field (or you can add to the plugin JavaScript settings, or your theme JS file, etc.):

<span class="counter"></span>
<script>
	jQuery(document).ready(function($){
		$('.usp-input-content').keyup(function(){
			var limit = 10; // word limit
			var count = $(this).val().split(/\b[\s,\.-:;]*/).length;
			$('.counter').html(count);
			if (count > limit) {
				alert('Word limit reached!');
				return false;
			}
		});
	});
</script>

There are a few things to be mindful of here, that you may want to customize:

• If applying the counter/limit to a different field, change .usp-input-content to the class or ID of the field you are using
• Currently the limit is set at 10 words. To change that, edit the value of the limit variable in the code.
• Customize the message that is displayed when the word limit is reached by editing the one instance of “Word limit reached!” to whatever works for you

Count and Limit Characters with jQuery, Display Character Count

Instead of counting and limiting words, we can change things up and limit/count the number of characters. Using the same basic technique as before, we first add the content field:

[usp_content]

Then, add the following code to the form, after the content field (or you can add to the plugin JavaScript settings, or your theme JS file, etc.):

<span class="counter"></span>
<script>
	jQuery(document).ready(function($){
		$('.usp-input-content').keyup(function(){
			var limit = 10; // character limit
			var count = $(this).val().length;
			$('.counter').html(count);
			if (count > limit) {
				alert('Character limit reached!');
				return false;
			}
		});
	});
</script>

As before, there are a few things that you may want to customize:

• If applying the counter/limit to a different field, change .usp-input-content to the class or ID of the field you are using
• Currently the limit is set at 10 words. To change that, edit the value of the limit variable in the code.
• Customize the message that is displayed when the word limit is reached by editing the one instance of “Character limit reached!” to whatever works for you

Count and Limit Characters, Display Character Count in Post Content

Here is a modified take on the previous jQuery technique. Here we are counting/limiting, but also adding a line in the post content that contains the number of characters. To try it out, first make sure your form includes the content field:

[usp_content]

Then, add the following code to the form, after the content field (or you can add to the plugin JavaScript settings, or your theme JS file, etc.):

<span class="counter"></span>
<script>
	jQuery(document).ready(function($){
		$('.usp-input-content').keyup(function(){
			var limit = 160; // character limit
			var count = $(this).val().length;
			$('.counter').html(count + ' Characters');
			if (count > limit) {
				alert('Character limit reached!');
				return false;
			}
		});
		$('.usp-submit').click(function(){
			var $textarea = $('.usp-input-content');
			var count = $textarea.val().length;
			var oldContent = $textarea.val();
			var newContent = oldContent + "\n\n" + count;
			$textarea.val(newContent);
		});
	});
</script>

Here you can customize the same things as in the previous technique. Plus you can customize the text/count info that is appended to the submitted post content. To do so, edit the line, oldContent + "\n\n" + count with whatever works.

Require Minimum Number of Characters, Display Character Count

The previous examples limit the maximum number of characters that are allowed. To instead require a minimum number of characters, first make sure that your form includes the USP Pro content shortcode:

[usp_content]

Then, add the following code to the form, after the content field (or you can add to the plugin JavaScript settings, or your theme JS file, etc.):

<span class="counter"></span>
<script>
jQuery(document).ready(function($) {
	$('.usp-input-content').keyup(function(){
		var count = $('.usp-input-content').val().length;
		$('.counter').html(count);
	});
	$('#usp-pro').on('submit', function(e) {
		var limit = 10; // min characters
		var count = $('.usp-input-content').val().length;
		if (count < limit) {
			alert('Minimum character requirement not met!');
			return false;
		} else {
			return true;
		}
	});
});
</script>

As with previous techniques, this snippet also will display the number of characters that the user has entered. You can change the minimum number of characters that are required by editing the 10 to whatever number is desired. You also can customize the popup message, “Minimum character requirement not met!” with whatever works best for your specific goals.

No jQuery? Check out this super basic vanilla JavaScript character counter by Dimitrije Stamenic.

Check out more jQuery code snippets for USP Pro.