v-model breaks HTML's minlength attribute validation

[Zohenn]

Version

3.0.0-rc.7

Reproduction link

https://jsfiddle.net/07ye1wu6/

Steps to reproduce

1. Type any text shorter than 5 characters into both inputs

What is expected?

Both inputs have red backgrounds, since browser should render them as invalid.

What is actually happening?

The input with v-model directive is treated as if it was valid, minlength validation is completely ignored.

---

The problem seems to occur only when using minlength, pattern with minimum characters regex works fine.
I couldn't reproduce the issue with Vue 2, so I guess the bug is somewhere in v3, if it is a bug to begin with.

[unbyte]

when value updated, v-model will set input.value to the new value no matter whether the input.value is equal to the new value or not.

accoring to https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute , the value validated by validation is the one last changed by a user edit (as opposed to a change made by a script)

so it's better to use pattern or a custom js validator instead.

@yyx990803 I can fix this usage scenario (value is only modified by its bound <input>). However, still can't trigger validation after modifying the value elsewhere. Or maybe need to document to avoid such usage scenarios (use v-model with minlength).

[Zohenn]

@unbyte The PR you provided will probably fix that, however, just like you see, the problem still persists when ditching v-model in favor of :value and @input. This also doesn't seem to be an issue with Vue 2.

Not quite sure what the correct solution should be. I can probably use pattern instead of minlength for my project, but since maxlength does work, I guess minlength should too.

[unbyte]

@Zohenn I found the way to fix it😀. working.

[unbyte]

@Zohenn i believe i have fixed it completely. However, to make minlength work well, the oldValue !== newValue comparison is required in every update for every el.value. i don't think it's a good way to fix it.

[Zohenn]

@unbyte Maybe someone else will look into this and provide a different solution. I'm afraid I can't help you with this, but you're probably right about it being not the most optimal fix.

[unbyte]

what about using pattern? this almost costs nothing
btw, I've tried to replace minlength's native behavior with a js validator, unfortunately js can't operate on the value of invalid

[Zohenn]

@unbyte I'm currently using pattern, however the behaviour is somewhat different. With minlength="5" you can easily differentiate which constraint is not satisfied - el.validity will have tooShort property set to true. With pattern=".{5,}" it will always be patternMismatch. That's about the only difference I can see, it is not a problem for me and you can always use JS for validation, just like you said.

Still, if someone finds HTML5 validation enough for his needs, they may encounter this problem again at some point, since minlength is probably the first solution that comes to your mind, not pattern, at least it was in my case. maxlength also causes problems - it won't trigger invalid state if you fill input with longer text by using el.value.

The best solution would be to forget about minlength and maxlength, not only in Vue, but everywhere and stick to using pattern. This way you won't encounter any similar problems in the future. So I guess it's more a matter of whether this should break in a case like this and if it's worth solving it in any way. Simply putting a warning about this somewhere in the docs might not be enough, as it will probably be overlooked.