How can I trigger the minlength validation when field is set programmatically?

Question

I have a field inside of a form like this:

<input type="text" minlength="20" name="description" id="description" />

When typed into, the minlength validation works great. But if the input's value is set programmatically the validation won't trigger.

var field = document.querySelector("#description");

// type a couple of character into the field
field.validity.tooShort;
// true

field.value = '';
field.validity.tooShort;
// false

Is there a workaround for this? Or a planned fix? Am I using it wrong?

What do you mean by programmatically like creating an element description programmatically using JQuery ? — BASEER HAIDER JAFRI
– BASEER HAIDER JAFRI, Commented Nov 21, 2017 at 16:10
I don't know why it's not working but as a workaround you can do it manually, get the attribute and the length of the value and compare them — Ricardo Ribeiro
– Ricardo Ribeiro, Commented Nov 21, 2017 at 16:32
Another workaround would be to use a pattern, something like this: pattern=".{20,}" — Ricardo Ribeiro
– Ricardo Ribeiro, Commented Nov 21, 2017 at 16:33
@BASEERHAIDER I mean like setting the value without typing in the field. field.value = "some text" — Edward Loveall
– Edward Loveall, Commented Nov 21, 2017 at 17:44
@EdwardLoveall so you want something like that if you do something like this field.value = "some text" and your field has min length 5 so it should show an error. is that true ? — BASEER HAIDER JAFRI
– BASEER HAIDER JAFRI, Commented Nov 21, 2017 at 18:11

Seth Jeffery · Accepted Answer · 2021-04-23 07:59:33Z

2

Stumbled across this today, you can work around it with pattern validation:

<input type="text" pattern="^.{20,}$" name="description" id="description" />

JS:

var field = document.querySelector("#description");
field.value = 'too short';
field.validity.patternMismatch;
// true

field.value = 'very very very very very very long';
field.validity.patternMismatch;
// false

answered Apr 23, 2021 at 7:59

Seth Jeffery

1,1201 gold badge8 silver badges9 bronze badges

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

Comments

run_the_race · Accepted Answer · 2024-11-30 12:28:23Z

One can set the customValidation message, which will be picked up by CSS instantly:

    // Browser ignores minlength check when updated programatically.
    // Calling checkValidaty() does not trigger the check, nor does dispatching
    // an input event on the element. So we have to use customValidity().
    function checkInputValidity(inputEl) {
        const required = inputEl.hasAttribute('required');
        const length = inputEl.value.length;
        const minlength = inputEl.getAttribute('minlength');
        if (required && minlength && length < minlength) {
            inputEl.setCustomValidity(`Please fill out this field, you require at least ${length - minlength} more characters.`);
        } else {
            inputEl.setCustomValidity('');
        }
    }

izanagi_1995 · Accepted Answer · 2017-11-21 16:32:29Z

-2

You can force the validation process by using

field.checkValidity();

See MSDN about checkValidity()

This page is about select but it's of course valid for every input field.

EDIT : My bad, this is not working, you should do the validation manually.

edited Nov 21, 2017 at 16:32

answered Nov 21, 2017 at 16:18

izanagi_1995

941 silver badge8 bronze badges

2 Comments

Ricardo Ribeiro Over a year ago

Not working, this returns true when it should return false, check this fiddle

januw a Over a year ago

This can only be used to verify required, and will always return` true` when disabled = true

Collectives™ on Stack Overflow

How can I trigger the minlength validation when field is set programmatically?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related