Jquery 文件输入验证 bootstrap 插件

Question

我在 file 输入字段中使用 Fileinput Bootstrap。以下是我的代码：-

HTML

<input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*,video/*'>
<input id="input-upload-img2" type="file" class="file" data-preview-file-type="text" name="img2" accept='image/*,video/*'>

Javascript

<script>
    $('#input-upload-img1').fileinput({
        initialPreview: [
            "<img src='img1' class='file-preview-image' alt='Desert'>",
        ]
    });
</script>

所以，现在我在一个具有 ID input-upload-img1 的输入字段上有一个初始预览，而在另一个输入字段上没有预览。

现在我对输入字段应用 jQuery 验证

img1: {
    require_from_group: [1, '.file'],
    accept: "image/*"
},
img2: {
    require_from_group: [1, '.file'],
    accept: "image/*"
}

但是，当我提交表单时，它仍然显示Atleast 1 field is required的错误。当我已经在第一个输入框中提供了图像时，为什么会发生这种情况？另外，如果我再次单独浏览。它会起作用。

为什么 jQuery 已提供初始预览字段时验证显示错误。

以下是我的虚拟代码：-

<!DOCTYPE>
<html>
<head>
    <style type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/css/fileinput.min.css"></style>
</head>
<body>
    <form>
        <input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*'>
        <button type="submit">Submit</button>
    </form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/js/fileinput.min.js"></script>
<script type="text/javascript">
    $("#input-upload-img1").fileinput({
        initialPreview: [
            "<img src='http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg' class='file-preview-image' width=20% height=20%>"
        ]
    });

    $('form').validate({
        rules: {
            img1: {
                require_from_group: [1, '.file'],
                accept: "image/*,video/*",
                filesize: 100000000
            }
        }
    })

</script>
</html>

如您所见，输入字段中最初有一张图片。但是当我提交表单时，它 returns 显示错误 Please fill at least 1 of these field，因为没有选择文件。我该如何克服这个问题？

这是 jsfiddle。但不知何故它不显示图像的初始预览，因此我建议您复制粘贴此代码并将其运行到您自己的系统上。

Answer 1

I'm using Fileinput Bootstrap for file input fields.

我怀疑原来的 input 元素被隐藏了，因此，通常会触发验证的各种用户事件没有发生。我不熟悉 Fileinput 插件，因此您可能需要执行以下一项或两项操作：

确保将 ignore 选项设置为 []。这将确保无论如何都会验证隐藏的输入元素。
您需要在与 Fileinput 元素交互时以编程方式触发验证。如果这个插件提供了一个回调函数，只要选择一个文件就会触发，把 $('[name="img1"], [name="img2"]').valid(); 放在这个函数里面。

Jquery 文件输入验证 bootstrap 插件

Jquery validation on fileinput bootstrap plugin

jquery

jquery-validate

twitter-bootstrap