Is There a Minlength Validation Attribute in Html5

Is there a minlength validation attribute in HTML5?

You can use the pattern attribute. The required attribute is also needed, otherwise an input field with an empty value will be excluded from constraint validation.

<input pattern=".{3,}"   required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

If you want to create the option to use the pattern for "empty, or minimum length", you could do the following:

<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}"   required title="Either 0 OR (8 chars minimum)">

HTML5 minimum character length validation ignoring spaces and tabs

I managed a silly hack that does what you asked:

<input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="\s*(\S\s*){6,}" title="Name should have at least 6 characters." required="" />

There must be 6 non-space characters for this to pass. so "asdfgh", " abc def " will work, but "abc de" fails.

It DOES NOT work for your comment about "there's a space after Anthony" but as Anthony contains 6 characters, then it's fine? If not, can you clarify further in the question.

---

To explain how it works:

• it takes a pattern of "take 1 non-space character" \S followed by "none-or-more space characters" \s*
• you need the pattern to be matched 6 or more times (pattern){6,} i.e. (\S\s*){6,}
• then allow non-or-more spaces at the front \s*

If you want to limit the characters allowed to Alpha only, change the \S to [A-Za-z].

Yes, it's a hack IMO as it will be hell to parse internally on long strings. But does the job. You might want to mix with maxlength to limit that as well?

HTML input checkValidity() always returns true even with minlength violations

This should work. As per WHATWG it should work. As per caniuse.com it should work.

However, it appears to only work when the value was edited by the user, not set from JavaScript. I did not find anything on WHATWG or MDN regarding that behavior (perhaps it is there, and I don't know where to look).

It is documented on WHATWG. Both minlength and maxlength require user interaction. To be more precise, when the user modifies the input value a "dirty value flag" is set, which is taken into account in the validation. See Limiting user input length: the maxlength attribute:

Constraint validation: If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.

---

Things I tested but do not make it work: Listening to the "invalid" event. Triggering an "input" event. Removing focus from the input with blur() before checking. Checking from queueMicrotask(function). Checking from requestAnimationFrame(function). Checking from double requestAnimationFrame(function). Checking with a valid value and then checking with an invalid value. Setting either a valid or an non-empty invalid default value via HTML attribute. Setting the value with setAttribute from JavaScript. Setting defaultValue.

I tested on Chromium Edge and Firefox.

I also found the question How can I trigger the minlength validation when field is set programmatically? which provided no solution.

---

Anyway, you can use pattern to mimic this validation constraint. And yes, that one will trigger from JavaScript correctly, as most validation constraints do. See https://stackoverflow.com/a/10294291/402022

minlength attribute doesn't seem to be working

The minlength attribute doesn't apply for input of type number. This is actually quite reasonable. Numbers don't have a length, text do. For reference, see The official documentation.

Using input type="number" for a fax field is semantically incorrect, anyway. You should use input type="text". Then you can limit its length by the maxlength or minlength attributes or even use the pattern one.

If you absolutely need to use number as input type and you need to limit the value to 10 digits, you can do it by using min and max attributes:

Fax #: <input type="number" name="fax" min="1000000000" max="9999999999" required />

Like I said, though, this is absolutely incorrect semantically.

textarea html5 validation with minimum number of characters

Have you taken a look at the attribute minlength? As of setting the attribut minlength="30" to the textarea.

<textarea name="textarea" id="description" value="" placeholder="Beskrivelse" required="required" minlength="30"  title="30 characters minimum"></textarea>

How do I add length check to form for validation

You can simply use minlength and maxlength attributes:

<input type="text" required placeholder="Enter your first name" minlength="3" maxlength="20">

---

Related Topics