Ввод файла Требуется предупреждение перед отправкой формы

Question

У меня есть несколько виджетов для загрузки файлов на одной странице, здесь я использую одно поле ввода, одно поле ввода файла, которое скрыто, 1 кнопку для выбора файла и 1 кнопку для предварительного просмотра файла.когда мы выбираем файл с помощью кнопки выбора файла, файлы загружаются с использованием ajax, а имя файла вставляется в первое поле ввода и создается ссылка для кнопки предварительного просмотра.

что я хочу, если файлы не были выбраныи загружен, он не должен отправлять форму, или если мы отправляем форму без выбора файла, он должен показывать предупреждение, что файл не был загружен.Первая загрузка файла.

Я искал другие вопросы в стеке, но не смог их решить.

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

Это моя часть загрузки файла ajax

<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

добавьте этот класс к вашим файлам, например:

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

попробуйте:

$("#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;
});

в вашем <script></script> разделе