Resetting form removes HTML 5 validation on input file

Question

I have encountered this problem and still have no clue/idea about this.

This is my code on jsfiddle.

As you can see, clicking "Upload" will trigger HTML validation on file input and a error message will be shown.

But if I select a file then click "Reset" button to reset the form. After that, I click "Upload" (submit form), the validation is gone.

I also tries using javascript method reset() but the problem still remained.

Note that I use Google Chrome browser.

Does anyone have some ideas about this issue?

Or have I just encountered a bug of HTML validation?

Answer 1

It looks like it's a bug with Chrome.
You can see the difference by adding the below CSS on input field.

input:invalid {
    color: blue;
} 

When you reset on FF, the input field becomes invalid but on Chrome, it does not. On Chrome, if you select a file and then bring up the select screen again then cancel it, the field becomes invalid. That seems like the only way to reset the input field.

Looks like you will have to add some code.

Answer 2

Only browser I had problems with this was on Chrome. The below would fix the issue for me (not sure why it works)

$("button[type='reset']").on('click', function() {
    $("#file").replaceWith('<input id="file" type="file" required />');
    return true;
});

JSFiddle