HTML input pattern customizing validation message causes error

Question

Fiddle: https://jsfiddle.net/v45hrqs1/7/

So, I build a small form in HTML using pattern attribute to check if a valid filename is given. Its working, so when I input something like filename/ and press enter, this will be caught an I get the message "Please match the request format".

Then I wanted a more customized message so I added the javascript part. Now, when I input a invalid filename and press enter, the new message will be shown, so far so good.

HOWEVER, when I now change the filename to a valid one, I still get the error message.

What did I do wrong? My idea is after I change the filename, var input is not updated. But I have no idea how to fix this.

Answer 1

You don't necessarily need JavaScript for this. You can just set the validity checks on the input themselves like this:

<input type="text" class="form-control" id="packet_name" name="packet_name" pattern="[^\\/:\x22*?<>|]+" oninvalid="setCustomValidity('Invalid character in name:\n \ / : * ? < >.')" oninput="setCustomValidity('')" maxlength="100" required>

And oninput will clear out the custom validity so it will be re-evaluated when it is changed.