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>

如您所见，输入字段中最初有一个图像。但是当我提交表单时，它会返回一个错误Please fill at least 1 of these field，因为没有选择文件。我怎么能克服这个？

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

Answer 1

我正在使用Fileinput Bootstrap作为文件输入字段。

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

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

fileinput bootstrap插件上的Jquery验证

1 个答案: