Javascript 提交表单前需要文件输入警告

我在一个页面上有多个文件上传小部件，我在这里做的是，我有一个输入字段，一个隐藏的文件输入字段，一个选择文件的按钮和一个预览文件的按钮。 当我们使用文件选择按钮选择一个文件时，使用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>

---

将此类添加到文件输入中，例如：

<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;
});

$（“#fimilyVisaForm”）.submit（函数（e）{
$（“.fileInput”）.each（函数（）{
如果（$（this）.is（“：可见”））{
if（$（this）.val（）==“”）{
e、 预防默认值（）；
$（this.css（“边框颜色”、“红色”）；
警报（“请确保选择该文件”）；
//$（this）.prepend（“请确保选择一个文件”）；
$（this.focus（）；
返回false；
}
}
});
返回true；
});

在您的
部分
中，我尝试了您的代码，但表单仍在提交中。它只是将边框颜色更改为红色，然后提交表单。我忘了设置默认值。编辑了我的答案。现在表单未提交，而且输入字段上也有危险边界，正如我所希望的，但我可以看到警报不起作用。我假设您的页面中已加载引导。。我添加了这些警报的东西作为你的好东西，我用普通警报编辑了代码。这就是你的问题所要求的吗？谢谢，伙计，这正是我想要的，但我有一点担心，还有两个文件上传小部件具有不同的id，但它们是有条件的，当某些条件匹配时，只有那些被显示的，在这种情况下，我怎么做呢，因为如果我只在这里包含这两个id，它不会提交表单，因为它将查找这些字段。我想是吧。
$("#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;
});