I want to show the "required" alert in an input of the type "file", this is hidden (display: none) because it must have a specific style, and this style is applied to its corresponding label. Below is an example:
<label for="add-photo-input" id="add-photo">Adjuntar Foto</label>
<input id="add-photo-input" type="file" required name="add-photo-input" style="display: none;">You could use JavaScript.
<script>
function check() {
var x = document.getElementById("add-photo-input").value;
if (x == "") {
document.getElementById("add-photo").style="border:.1em solid blue";
alert("Please add photo");
return false;
}
} function reset() {
document.getElementById("add-photo").style="border:none";
}
</script>
And make sure that the check function is called when the submit button is clicked:
<label for="add-photo-input" id="add-photo" onclick="reset()">Adjuntar Foto</label>
<input id="add-photo-input" type="file" required name="add-photo-input" style="display:none">
<input onclick="check()" id="submit" type="submit" />
It would be helpful to have more information, is there a reason you aren't able to change the style of the file input element to match what you want?
