If your error message is a single one, then try below.
<input oninvalid="this.setCustomValidity('my error message')" oninput="this.setCustomValidity('')"> <!-- 👈 don't forget it. --> To handle multiple errors, try below
<input oninput="this.setCustomValidity('')"> <script> inputElem.addEventListener("invalid", ()=>{ if (inputElem.validity.patternMismatch) { return inputElem.setCustomValidity('my error message') } return inputElem.setCustomValidity('') // default message }) </script> Example
You can test valueMissing and valueMissingfor input illegal filename or valueMissing.
<form> <input pattern="[^\\/:\x22*?<>|]+" placeholder="input file name" oninput="this.setCustomValidity('')" required > <input type="submit"> </form> <script> const form = document.querySelector("form") const inputElem = document.querySelector(`input`) inputElem.addEventListener("invalid", ()=>{ if (inputElem.validity.patternMismatch) { return inputElem.setCustomValidity('Illegal Filename Characters \\/:\x22\x22*?<>|') } return inputElem.setCustomValidity('') // return default message according inputElem.validity.{badInput, customError, tooLong, valueMissing ...} }) form.onsubmit = () => { return false } </script>