Why are custom validation messages causing my HTML form elements to stay invalid?-CodePudding

The

CodePudding user response：

First of all, per MDN:

It's vital to set the message to an empty string if there are no errors. As long as the error message is not empty, the form will not pass validation and will not be submitted.

This agrees with that the HTML standard says:

Suffering from a custom error

When a control's custom validity error message (as set by the element's setCustomValidity() method or ElementInternals's setValidity() method) is not the empty string.

An element satisfies its constraints if it is not suffering from any of the above validity states.

Your sample does not clear the custom error if the form field is determined to be valid. As such, once the field is determined invalid, it stays so for the remainder of the session.

Moreover, you modify custom error only after the field has already been determined invalid. This means the form will still not be submitted even if you clear the message in the same handler.

A better way too accomplish your goal would be to monitor the field in the change event handler for the field and set the custom message there:

document.getElementById('UserName').addEventListener('change', function (ev) { const input = ev.target; if (input.validity.patternMismatch) { input.setCustomValidity("Usernames cannot contain the @ symbol"); } else { input.setCustomValidity(""); } }, false);

<form onsubmit="event.preventDefault(); alert('Form submitted');" action="post">  <input id="UserName" type="text" pattern="^((?!@).)*$" required /> <button type="submit">Submit</button> </form>