Question

我在项目中使用formvalidation.io插件（版本0.8.1），当我发现FilePond支持拖放附件时，我感到非常兴奋。但是，我似乎无法让这两个插件一起工作。我知道FilePond有自己的验证，但是我的表单提交依赖于formvalidation插件。有人在类似情况下有经验吗？这两个插件看起来都很通用，我可能只是想念一些东西。

我正在使用引导程序，并试图始终使用FilePond输入的名称，但是当我在池塘中添加/删除文件时，formvalidation插件似乎无法识别。

<input type="file" class="attachment" name="attachment[]" required multiple>
<script>
    const inputElement = document.querySelector('.attachment');
    pond = FilePond.create(inputElement, {
        allowMultiple: true,
        dropValidation: true,
        name: 'attachment[]',
        required: true,
        instantUpload: false,
        maxTotalFileSize: '24MB',
        allowFileSizeValidation: true,
        labelMaxTotalFileSizeExceeded: 'Maximum total size of 24MB exceeded!'
    });
</script>

$('#suggestionForm')
  .formValidation({
      framework: 'bootstrap',
      icon: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
      },
      autoFocus: true,
      fields: {
          'attachment[]': {
              row: '.col-sm-12',
              selector: '.attachment',
              validators: {
                  file: {
                      message: 'Please attach documents no larger than 24Mb.',
                      maxTotalSize: 25165824
                  },
                  notEmpty: {
                      message: 'Please provide an attachment.'
                  }
          }
      }

.on('change', 'attachment[]', function(e) {
    $('#suggestionForm').formValidation('revalidateField', 'attachment[]');
})

如果池塘是空的或总大小超过24MB，我希望formvalidation相应地输出消息。

仅使用纯格式输入时，formvalidation插件使用相同的代码即可按预期工作，但是用户被锁定为必须在一次附加操作中提供所需的所有文件，否则，下一次尝试将覆盖它们。这是FilePond的一个很好的解决方案，我已经有了表单，可以按照期望的方式通过$ _POST内的$ _FILES提交和收集文件。我只是无法使此验证工作正常工作。

非常感谢您的帮助或见识！

使用FilePond和formvalidation.io

0 个答案: