Validate HTML input in JS prior to change

Question

It looks like when an input element is initially loaded, its validity is not evaluated right away. For example, if my HTML looks like this...

<input type="text" value="ABC" minlength="5">

In JavaScript it appears that the input is valid and not too short, despite the value attribute being set to a length less than 5. For example:

const input = document.querySelector("input");
console.log(input.validity.valid); // true
console.log(input.validity.tooShort); // false

Only when the user makes a change in the input can we get a true reckoning of the input's validity.

Is there any way to force the input to evaluate its actual validity on load, even if the user has not yet touched the input?

See example: https://jsfiddle.net/t5afujkn/3/

TylerH · Accepted Answer · 2022-12-29 15:12:52Z

0

I guess the reason is your default value is not checked from <input> directly at load as it probably does not trigger a check for the default values.

You can add another check condition in your js as below:

{
    const displayObj = {
       valid: input.validity.valid,
       tooShort: input.validity.tooShort
    };
    if (input.value.length < 5) {
       displayObj.valid = false;
       displayObj.tooShort = true;
       document.querySelector("p").textContent = JSON.stringify(displayObj);
    }
}

or maybe you can also try to put the if condition somewhere outside the button call.

Also I did an update in JSFiddle; not sure if you can see it: https://jsfiddle.net/2Lhp96ct/6/

edited Dec 29, 2022 at 15:12

TylerH

21.3k84 gold badges84 silver badges122 bronze badges

answered May 25, 2022 at 1:08

besjon_c

1723 silver badges13 bronze badges

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

6 Comments

Matthew Souther Over a year ago

Thanks for your reply. This is just a simple example to illustrate the challenge I'm facing with a complex implementation that leverages HTML5 form validation. I'm not really interested in doing a complete rewrite of that functionality.

besjon_c Over a year ago

Hey, so your input is inside a form, right? do you use jquery in your project or just vanilla js?

Matthew Souther Over a year ago

The input isn't inside a form. Putting it inside one in my jsfiddle example doesn't seem to make a difference in behavior. I am using vanilla JS.

besjon_c Over a year ago

Yes I know you dont have a form, but there are ways in javascript to force the from to validate on load: stackoverflow.com/questions/15696938/…. Unfortunately, I am not aware of any method to do that with only html5 alone. Usually the inputs are used inside a form and user usually submit a form. Then the html5 validation takes place (I think this was the main design goal of having validation on input elements as to be checked when submitting a form). I am sorry, hopefuly someone else can help.

Matthew Souther Over a year ago

HTML5 validation properties like minlength work when the user interacts with the input element by changing the value. Based on testing, it's clear that this happens with or without a <form> element or a submit event, so I'm fairly certain that piece is irrelevant. Possibly the answer is that there is no way to force validation prior to user interaction -- I am still hoping for someone to offer a definitive answer on that.

|

Collectives™ on Stack Overflow

Validate HTML input in JS prior to change

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related