Сброс формы удаляет проверку HTML 5 на входном файле

Question

Я столкнулся с этой проблемой и до сих пор не имею понятия об этом.

Это мой код на jsfiddle.

Как вы можете видеть, нажатие кнопки «Загрузить» приведет к проверке HTML на входе файла и появится сообщение об ошибке.

Но если я выберу файл, нажмите кнопку «Сброс», чтобы сбросить форму. После этого я нажимаю «Загрузить» (отправить форму), проверка не прошла.

Я также пытаюсь использовать метод javascript reset(), но проблема все еще осталась.

Обратите внимание, что я использую браузер Google Chrome.

Есть ли у кого-нибудь идеи по этой проблеме?

Или я только что столкнулся с ошибкой проверки HTML?

Answer 1

Только браузер У меня были проблемы с этим было в Chrome. Ниже будет решить проблему для меня (не знаю, почему это работает)

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

JSFiddle

Answer 2

Похоже, это ошибка с Chrome.
Вы можете увидеть разницу, добавив ниже CSS в поле ввода.

input:invalid { 
    color: blue; 
} 

При сбросе на FF поле ввода становится недействительным, но в Chrome это не так. В Chrome, если вы выберете файл, а затем снова отобразите экран выбора, а затем отмените его, поле станет недействительным. Это похоже на единственный способ сбросить поле ввода.

Похоже, что вам нужно будет добавить код.