HTML Input-Attribute "required" only for one button

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>

Sorry, but this doesn't make sense: Delete which file - the one you are about to upload??? — Johannes
– Johannes, Commented Jun 8, 2017 at 22:22
Thanks @j08691 Sometimes its just so simple that you didnt even thought about that :D — frosty
– frosty, Commented Jun 8, 2017 at 22:24
In addition to @j08691 comment, are you trying to reset the file selection? If that's the case then set type="reset" for del_image input. Also, using <button> instead of <input> is even better. — Fahmi
– Fahmi, Commented Jun 9, 2017 at 0:01

TPAKTOPA · Accepted Answer · 2017-08-06 07:02:51Z

5

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>

answered Aug 6, 2017 at 7:02

TPAKTOPA

2,7522 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Monkey_Dev1400 · Accepted Answer · 2017-06-09 00:41:08Z

1

(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>

answered Jun 9, 2017 at 0:41

Monkey_Dev1400

1,0447 silver badges14 bronze badges

Collectives™ on Stack Overflow

HTML Input-Attribute "required" only for one button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related