Is there a minlength validation attribute in HTML?

Variable length and pattern attribute

For fields requiring variable-length inputs, use the versatile pattern attribute. This attribute lets you define a regular expression to match the input against, thereby allowing a great deal of flexibility:

• Specify a length range: pattern=".{5,10}" will make sure the input length is between 5 and 10 characters.
• Accept input of either no characters or at least 8 characters: pattern=".{0}|.{8,}".

Guiding users with title attribute

Boost user-friendly interaction by setting a clear expectation with the title attribute. On hover, the title message is displayed, instructing users on the input requirements.

<input type="text" minlength="8" title="Your password must be 8 chars long. (Think of it as the key to your diary!)" required>


Custom validation feedback

In cases where the minlength isn't met, HTML forms show generic error messages which might not serve your use case. The validity.tooShort property in JavaScript helps us to indicate custom validation feedback to suit our requirements.

Going beyond with the pattern attribute

The pattern attribute is a mighty tool that works hand in hand with minlength. With it, you can set RegExp patterns to match the exact set of characters you need.

• It can ensure that your input type strictly includes specific characters only. For example, pattern="[a-zA-Z]{8,}" ensures your input consists of a minimum of 8 alphabets.

Keeping passwords secure

With the use of both minlength and maxlength, manage the security and usability of password fields:

<input type="password" required minlength="8" maxlength="10" title="Choose a password between 8 and 10 characters. No, 'password' won't work...">


A combination of minlength and maxlength provides a good balance between security and usability.

Using HTML5 validation attributes

HTML5 introduces new validation attributes like minlength, maxlength, and required — these provide more control over client-side input validation.

• Encapsulate input elements with relevant patterns within a form for synchronised and fuller validation experience.
• To initate the form validation, a submit button like <input type="submit" value="Check"> works, thereby triggering the validation on user interaction.

The constraints with textarea enforcement

The minlength attribute does not apply to textarea elements. In such cases, JavaScript validation or third-party libraries can step in to enforce a minimum length.

The all-important browser compatibility check

Always review the browser compatibility for each attribute to avoid unexpected outcomes. Check the caniuse.com to verify browser support for minlength.

References