How to display a modal (bootstrap) stating that the input type="file" can not be null?

-1

I have an input:

<input id="imagens" type="file" multiple name="file" accept="image/x-png, 
        image/gif, image/jpeg" required />

And the following javascript code:

var fileUpload = document.getElementById("imagens");
var enviar = document.getElementById("enviar");
enviar.addEventListener("click", function (event) {
    if (fileUpload.files.length == 0) {
        alert("Nenhum Arquivo Selecionado");
        return;
    }
})

I would like to see a modal bootstrap instead of alert if the user tried to submit the form without images.     

asked by anonymous 18.10.2017 / 14:29

2 answers

0

I solved it this way:

HTML

 <input id="imagens" type="file" multiple name="file" accept="image/x-png, 
 image/gif, image/jpeg" required />

Jquery

  $("#target").submit(function (event) {
        var imgVal = $('#imagens').val();
        if (imgVal == '') {
            $('#myModal').modal('show')
        }
    });

Where target is the id of my form and mymodal is the id of my modal.

    
18.10.2017 / 16:20
1

Maybe this code with Jquery should help. Within this IF (), I am not 100% sure of this but I believe it is in that sense

$('#myModal1').on('shown.bs.modal', function() {

var $me = $(this);

$me.delay(3000).hide(0, function() {
    $me.modal('hide');
});

});

Displays the modal for 3 seconds.

    
18.10.2017 / 14:40