仅在满足条件时为必填字段

Question

I have a form with, among other fields, a picture for the user to upload and a hidden field to hold ID. I need the picture to be required only if ID is empty, otherwise the user is editing, so there is already a picture in there.

Can it be done with HTML only? Maybe this could be done with javascript, but how to show this default popup (shown below) that appears when you just set required ? I've checked this and this questions, but they don't provide the expected result.

Popup:

Any ideas?

Answer 1

To set that 'popup', you need to call HTMLSelectElement.setCustomValidity() on the element.

var foo = document.getElementById("foo");
// check condition
foo.setCustomValidity("A custom message for the popup");

The code found here helped me figure it out.

Answer 2

Simple: Consider to use an array called "files" of your images ID´s:

var file = this.files[0];
var fileType = file["type"];
var ValidImageTypes = ["image/gif", "image/jpeg", "image/png"];
if ($.inArray(fileType, ValidImageTypes) < 0) {
     // invalid condition goes here.
}