JavaScript native form abilities

Asked Mar 08 '22 at 18:15

Active Mar 08 '22 at 18:15

Viewed 13 times

Say I have form with 2 inputs (email and password) that the user submits. onSubmit I process the form with a fetch call, catch the errors and need to display it back to the user. ie. an error such as "The email address you provided does not exist". So basically a typical login form. I'd like to display this message to the user via the native form warning displays.

I see there's a way to set the inputs custom message with setCustomValidity but I'm not sure how to display the message again once I've determined there's an error.

After some research I've determined that I have to apparently resubmit the form to display the custom error. Other sites claim that I can do it directly. It's rather confusing.

So the question is how can I set then instantly display a custom input error to take advantage of native form validation?

asked Mar 08 '22 at 18:15

pilotguy

1

Use `reportValidity()` to make it show the message. – Barmar Mar 08 '22 at 18:21
On the element or the form? I tried that...no worky! – pilotguy Mar 08 '22 at 18:47
On the form, after calling `setCustomValidity()` on the input. – Barmar Mar 08 '22 at 19:52
See https://jsfiddle.net/20dqae5x/ – Barmar Mar 08 '22 at 19:53
Something else must be wrong cause it's not displaying the native error field. Sigh. Thanks! – pilotguy Mar 08 '22 at 22:43
Post your code and we can try to help – Barmar Mar 08 '22 at 23:42
All good. It was quite annoying, it seems like the form was receiving the setCustomValidity but I had to use setTimeout or queueMicrotask to trigger it – pilotguy Mar 10 '22 at 00:03
I didn't need to do that in my jsfiddle. I'm not sure why you did. – Barmar Mar 10 '22 at 00:04
Yeah I don't understand either tbh. But it works now – pilotguy Mar 10 '22 at 00:12

JavaScript native form abilities

0 Answers0