HTML Input-Attribute "required" only for one button - html

Question

I've got an file-input which is submitted with a submit button. But theres also a delete button in the same form. So my problem is, when i press the delete button it will say "Please select an file" because the "required" attribute is in the file-input. I want that this message only displays when you press the upload button(of course only if the input is empty).
Here's my Code :
<form>
<input name="file" id="file" type="file" required>
<input type="submit" name="sub_image" value="Upload">
<input type="submit" name="del_image" value="Delete">
</form>

Answer 1

You could use formnovalidate attribute to skip validation on specific submit button:
<form>
<input name="file" id="file" type="file" required>
<input type="submit" name="sub_image" value="Upload">
<input type="submit" name="del_image" value="Delete" formnovalidate >
</form>

Answer 2

(function ($) {
$('#my-form').validate({
rules: {},
messages: {},
submitHandler: function () {
return false
}
});
$('#del_image').click(function(){
$("#file").val("");
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<form id="my-form">
<input name="file" id="file" type="file" required>
<input type="submit" name="sub_image" value="Upload">
<button id="del_image">Delete</button>
</form>