Jquery验证fileinput引导程序插件

我使用Fileinput Bootstrap为file输入字段。以下是我的代码： -Jquery验证fileinput引导程序插件

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和我的输入字段的一个没有在另一个输入字段上预览。

现在我申请的输入域

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

但是，jQuery的验证，当我提交表单，它仍然显示说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。但它以某种方式不显示图像的初始预览，因此我建议您复制粘贴此代码并将其运行在您自己的系统上。

来源

2016-06-07 PythonEnthusiast

似乎为我工作。我无法提交表单，直到我至少选择一张图片：https：//jsfiddle.net/g7ugaejs/ – Sparky

这正是问题所在。我应该允许提交表单，因为已经为输入文件字段之一提供了初始预览。 – PythonEnthusiast

也许你对'require_from_group'规则意味着什么感到困惑。规则规定至少必须填写一个字段。只要你[选择一个文件上传，该规则完全满意，表格允许提交]（https://jsfiddle.net/g7ugaejs/）。否则，我不明白这个问题，因为你正在描述它。 – Sparky

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

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

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

来源

2016-06-07 21:19:04 Sparky

那么，我从它的Github回购问题中读到，那个预览只是一个显示......它没有填充文件输入。我如何在代码中处理这个问题？ – PythonEnthusiast

因为我在文件输入字段上使用'require_from_group'，是否应该覆盖这个函数。对不起，问一个天真的问题。我对jQuery不太熟悉。请求您提供合适的演示。谢谢。 – PythonEnthusiast

@PythonEnthusiast，在请求我构建演示之前，我会向你询问相同的内容。由于我对'Fileinput'插件不熟悉，请提供一个显示问题的jsFiddle演示。 – Sparky

Jquery验证fileinput引导程序插件

回答

相关问题