How to Set a Minimum Character Limit on an HTML Textarea?

You can use the minlength attribute (which is very well-supported across different browsers) on the HTML <textarea> element to enforce minimum number of characters that a user must enter for the input to be valid. For example:

<textarea minlength="3"></textarea>

This would limit a <textarea> element to a minimum of 3 (UTF-16 code units) characters.

For a more visual example, you could try the following HTML/CSS code:

<style>
textarea:invalid { border: 1px solid red; outline: none; }
</style>

<textarea minlength="3" required></textarea>

This would turn the border of the <textarea> element red, as long as the input is invalid/empty.

Please note that if no minlength is set on the <textarea> element, or a non-positive integer value is set, then no minimum input is enforced.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.