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

Question

除了 1 种情况外，我的 FineUploader 运行良好。在某些情况下，我的表单元素之一（例如文本框或下拉菜单）包含无效数据。我想防止在这种情况下发生上传。只要选择了有效图像，FineUploader 就会以某种方式绕过我的表单验证和提交。这是我的表单标签：

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

我的 checkForm() 功能正常 returns true/false 返回到 onSubmit 表格。当它 returns false 时，通常会阻止表单提交，但只要 FineUploader 有一个有效的图像（由用户选择），它在所有情况下都会提交，即使 checkForm() returns 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 中，那就太好了。如果没有，我会对任何类型的 hack 感到满意，我只需要让它工作。谢谢。

Answer 1

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

Answer 2

由于 setCustomValidity 在 fine-uploader.js 中抛出运行时异常，我能找到的防止 fine-uploader 在自定义验证问题中继续上传的最佳方法是这样做：

_uploadStoredFiles: function() { // find this line in fine-uploader.js
    if(!zgpValidationOK){ // add a var of your choice, set to true upstream
        return; // if var above becomes false in custom code, return now
    }

非常适合我。

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

Prevent form submit in certain cases

javascript

jquery

fine-uploader