文件输入引导插件上的 Jquery 验证答案

【问题标题】：Jquery validation on fileinput bootstrap plugin文件输入引导插件上的 Jquery 验证
【发布时间】：2016-06-07 20:12:08
【问题描述】：

我将Fileinput Bootstrap 用于file 输入字段。以下是我的代码：-

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。但不知何故，它不会显示图像的初始预览，因此我建议您复制粘贴此代码并在您自己的系统上运行。

【问题讨论】：

似乎对我有用。在选择至少一张图片之前，我无法提交表单：jsfiddle.net/g7ugaejs
这正是问题所在。我应该被允许提交表单，因为已经为输入文件字段之一提供了初始预览。
也许您对require_from_group 规则的含义感到困惑。该规则规定至少必须填写一个字段。只要你select a file for upload, the rule is fully satisfied and the form is allowed to submit。否则，我不明白你描述的问题。
所以基本上我希望当我设置初始预览时，jquery-validation 应该跳过文件输入所需的验证。
如何在 jquery 中编写这样的代码？

标签： jquery twitter-bootstrap jquery-validate

【解决方案1】：

我将 Fileinput Bootstrap 用于文件输入字段。

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

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

【讨论】：

好吧，我从它的 Github repo 问题中读到，预览只是一个显示......它不会填充文件输入。如何在代码中处理这个问题？
既然我在文件输入字段上使用require_from_group，我应该覆盖这个函数吗？抱歉问了一个幼稚的问题。我不精通jquery。请您提供合适的演示。谢谢。
@PythonEnthusiast，在让我构建一个演示之前，我会问你同样的问题。由于我不熟悉Fileinput 插件，请提供一个 jsFiddle 演示来显示问题。
@sparky- 我用虚拟演示和 jsfiddle 链接更新了我的问题。请看一看。谢谢