How to Set a Minimum Character Limit on an HTML input Element?

Find out how you can set minimum character requirement on an HTML input

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

<input type="text" minlength="3" />

This would limit an <input> 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>
input:invalid { border: 1px solid red; outline: none; }
</style>

<input type="text" minlength="3" required />

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

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


Hope you found this post useful. It was published . Please show your love and support by sharing this post.