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

Question

Pretty simple set up:

const input = window.document.getElementById('Input');
input.value = "foobar"
console.log(input.checkValidity());

<input id="Input" type="text" minlength="8" required />

The following returns true when it should be false. See https://jsbin.com/huqowesewu/edit?html,output

Why in the world is this? The input has a length of 6, which is less than 8, ergo, it should be invalid. But it's not. Is this attribute broken? Or is checkValidity() broken? I'm baffled to say the least.

Theraot · Accepted Answer · 2021-04-01 00:19:22Z

16

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

edited Apr 1, 2021 at 0:19

answered Mar 31, 2021 at 23:16

Theraot

41.2k7 gold badges70 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Devildude4427 Over a year ago

Ah, okay, glad I'm not doing something horribly wrong. I came across pattern which I swapped to but I really wanted to know why this wasn't working. Broken spec is beyond my control though. Thanks for all your time.

Theraot Over a year ago

@Devildude4427 found and added the spec.

Cihad Turhan Over a year ago

Thanks for sharing your efforts @Devildude4427 I've been testing it for hours to understand what I've done wrong. Seems like it's not a bug, it's a feature...

mplungjan · Accepted Answer · 2023-12-06 15:05:09Z

-1

This is a better way to get false.

function myfunction() {
  var iny = document.getElementById("Input");
  document.getElementById("demo").innerHTML = iny.checkValidity();
}

<input type="text" minlength="8" id="Input" required />
<button onclick="myfunction()">TRY</button>
<p id="demo"></p>

edited Dec 6, 2023 at 15:05

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Mar 31, 2021 at 23:29

user15525969

1

4 Comments

Devildude4427 Over a year ago

That'll still return true when it should false. All you're doing is moving the console log into the DOM.

user15525969 Over a year ago

Change function to this: function myfunction(){ var iny = document.getElementById("Input"); console.log(iny.checkValidity()); }

Devildude4427 Over a year ago

You're forgetting to set the input content. You need to do that or your "solution" is just ignoring the problem.

Theraot Over a year ago

The required constraint works. The issue is with minlength. We, of course, use them together because if the input is not required, it does not have to be valid. To reiterate, when the input is empty, we get false as expected. For which required is sufficient. But when the input is not empty, but its contents is shorter than minlength we get true, meaning that minlength wasn't checked. We of course want false in that situation. To reiterate again, we want false when the input is not empty and its contents is shorter than minlength.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related