File Input Required alert before submit form

Question

I have Multiple File upload widgets on single page, what i am doing here is, i have one input field, one file input field that is hidden , 1 button to select file and 1 button to preview file. when we select a file using file select button, the files gets uploaded using ajax and file name getting inserted into first input field and a link generated for preview button.

what i want is, if files has not been selected and uploaded, it should not submit the form, or if we submit the form without file selection, it should show alert that file has not been uploaded. first upload file.

i have searched for some other questions over stack, but not able to solve it.

    <form id="fimilyVisaForm" action="https://www.somesite.com/india/chk-payment-done/<?php echo $appid;?>" method="post" enctype="multipart/form-data">

<!--upload widget no 1-->   

                        <div class="form-control">
                            <div class="col-sm-4 label">Colored Scanned copy of the Passport</div>
                            <div class="col-sm-3">
                                <input type="text" class="form-control-input" placeholder="Colored Scanned copy of the Passport" name="passport_copy_upload" id="passport_copy_upload" onclick="removeError(this.id);" value="" readonly required />
                            </div>
                            <div class="col-sm-3">
                                <input type="button" class="submit-btn read-more" value="Select File" id="passport">
                                <input type="file" name="passportimg" id="passportimg" style="display:none">
                                <a id="passportlink" class="submit-btn read-more" href="javascript:void(0)" target="_blank">VIEW UPLOADED FILE</a>
                            </div>
                            <div class="col-sm-12" id="passportmsg" style="color: green; margin-bottom: 20px; font-weight: 600;"> </div>
                        </div>
<!--upload widget1 end-->

<!-- Upload widget 2 Starts -->                        
                        <div class="form-control">
                            <div class="col-sm-4 label">Coloured Scanned copy of your front facing photograph with white background</div>
                            <div class="col-sm-3">
                                <input type="text" class="form-control-input" placeholder="Colored Passport-type photograph" name="photoid" id="photoid" onclick="removeError(this.id);" value="" readonly required />
                            </div>
                            <div class="col-sm-3">
                                <input type="button" class="submit-btn read-more" value="Select File" id="photographbtn">
                                <input type="file" name="photograph" id="photograph" style="display:none">
                                <a id="photoview" class="submit-btn read-more" href="javascript:void(0)" target="_blank">VIEW UPLOADED FILE</a>
                            </div>
                            <div class="col-sm-12" id="photomsg" style="color: green; margin-bottom: 20px; font-weight: 600;"> </div>
                        </div>

<!-- upload widget2 Finish-->

<input id="next" class="btn custom-btn" name="submit" type="submit" value="Submit">
</form>

this is my ajax file upload part

<script>
    $("#passportimg").change(function() {
        var form = $("#fimilyVisaForm")[0];
        var form_data = new FormData(form);
        $('.overlay').show();
        $.ajax({
            url: '<?= base_url();?>visa/upload/do_upload/<?php echo $appid;?>',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response) {
                var pptimg = response.pptimg;
                var passporturl = "<?=base_url();?>upload/" + pptimg;
                document.getElementById("passport_copy_upload").value = response.pptimg;
                document.getElementById('passportlink').href = passporturl;
                $("#passportmsg").html("Your Passport has been Successfully Uploaded. Proceed to Upload other Documents");
                $('.overlay').hide();
            }
        });
    });




    $("#photograph").change(function() {
        var form = $("#fimilyVisaForm")[0];
        var form_data = new FormData(form);
        $('.overlay').show();
        $.ajax({
            url: '<?= base_url();?>visa/upload/do_upload_photo/<?php echo $appid;?>',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response) {
                var photoidimg = response.photoidimg;
                var photographurl = "<?=base_url();?>upload/" + photoidimg;
                document.getElementById("photoid").value = response.photoidimg;
                document.getElementById('photoview').href = photographurl;
                $("#photomsg").html("Your Photograph has been Successfully Uploaded. Proceed to Upload other Documents");
                $('.overlay').hide();
            }
        });
    });
</script>

Answer 1

add this class to you file inputs, example:

<input type="file" name="passportimg" id="passportimg" style="display:none" class="fileInput">

give this a try:

$("#fimilyVisaForm").submit(function(e) {
    $(".fileInput").each(function() {
        if($(this).is(":visible")) {
            if($(this).val() == "") {
                e.preventDefault();
                $(this).css("border-color", "red");
                alert("Please make sure to select the file.");
                //$(this).prepend("<div class=\"alert alert-danger\" role=\"alert\">Please make sure to select a file.</div>");
                $(this).focus();
                return false;
            }
        }
    });
    return true;
});

in your <script></script> section