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?