Question

除了1个场景外，我的FineUploader工作得很好。在某些情况下，我的某个表单元素（如文本框或下拉列表）包含无效数据。我希望防止在这种情况下发生上传。不管怎么说，只要选择了有效的图像，FineUploader就会绕过我的表单验证和提交。这是我的表格标签：

<form action="./fine-uploader/server/endpoint.php" id="qq-form" onsubmit="return checkForm(this)">

我的checkForm()函数正确地将true / false返回给表单的onSubmit。当它返回false时，通常会阻止表单提交，但只要FineUploader有一个有效的图像（由用户选择），它就会在所有情况下提交，即使checkForm（）返回false。

我已经尝试过这个：

form: { interceptSubmit: false},

这有效，但它有一个非常糟糕的副作用：它不是提交表单异步，而是重定向到我的php处理程序（我想它正在执行表单GET或POST），而不是做一个很好的异步提交。

我只需要一种方法来防止在我选择时提交表单，并在需要时启用表单提交。

目前我的设置如下：

<script>
    var manualUploader = new qq.FineUploader({
        element: document.getElementById('fine-uploader-manual-trigger'),
        template: 'qq-template-manual-trigger',
        request: {
            endpoint: './fine-uploader/server/endpoint.php'
        },
        thumbnails: {
            placeholders: {
                waitingPath: './fine-uploader/placeholders/waiting-generic.png',
                notAvailablePath: './fine-uploader/placeholders/not_available-generic.png'
            }
        },
        validation: {
            allowedExtensions: ['png', 'jpg', 'jpeg', 'gif'],
            itemLimit: 1,
            sizeLimit: 307200 // 300 kB = (300kb * 1024 bytes) = 307200
        },
        callbacks: {
            onComplete: function(id, name, responseJSON) {
                if (responseJSON.success === true) {
                    //location.href = "ManageAds.php";
                    location.href = "index.php";
                } else {
                    console.log(responseJSON);
                    //history.go(0);
                }

                //console.log(responseJSON.success);
            },
        },
        autoUpload: false,
        debug: false,
        multiple: false
    });

    qq(document.getElementById("trigger-upload")).attach("click", function() {
        manualUploader.uploadStoredFiles();
    });
</script>

当我的一个验证器失败时，如何阻止表单提交？如果你有一些优雅的内置并且内置在FineUploader中，那就太好了。如果没有，我会对任何类型的黑客感到满意，我只需要让它工作。感谢。

Answer 1

使用Constraints API代替内联onSubmit事件处理程序（您永远不会使用它）。此标准允许您为每个表单字段指定自定义限制。您还可以使用setCustomValidity方法观察元素的更改并以实用方式更新有效性。所有这些都是由HTML5 Web规范提供的，并且代表了处理表单验证的现代方法。 Fine Uploader将尊重任何此类限制。

Answer 2

由于setCustomValidity在fine-uploader.js中抛出运行时异常，我发现阻止上传者在自定义验证问题中继续上传的最佳方法是：

let source = {
  title: '1',
  included: [{
    _id: 'new',
    _type: 'mytype'
  }]
}

function recursiveGet (source) {
  return new Promise((resolve, reject) => {
    client.mget({
      body: {
        docs: docsToFetch
      }
    })
    .then(response => {
      return source.included.map(item => {
        return somethingAsync(response)
      })
    })
    .then(promises => {
      Promise.all(promises)
        .then(resolved => {
          source.included = resolved.map(doc => {
            if (doc.included && !doc.resolved) {
              resolve(recursiveGet(doc))
            } else {
              resolve(doc)
            }
          })
        })
    })
  })
}

recursiveGet(source)

非常适合我。

在某些情况下阻止表单提交

2 个答案: