Javascript 在某些情况下防止表单提交

Javascript 在某些情况下防止表单提交,javascript,jquery,fine-uploader,Javascript,Jquery,Fine Uploader,我有我的FineUploader工作良好,除了1个场景。在某些情况下,我的表单元素之一(如文本框或下拉列表)具有无效数据。我想防止在这种情况下发生上传。FineUploader在某种程度上绕过了我的表单验证并提交,只要选择了有效的图像。这是我的表单标签: <form action="./fine-uploader/server/endpoint.php" id="qq-form" onsubmit="return checkForm(this)"> 这是可行的,但它有一个可怕的副作

我有我的FineUploader工作良好,除了1个场景。在某些情况下,我的表单元素之一(如文本框或下拉列表)具有无效数据。我想防止在这种情况下发生上传。FineUploader在某种程度上绕过了我的表单验证并提交,只要选择了有效的图像。这是我的表单标签:

<form action="./fine-uploader/server/endpoint.php" id="qq-form" onsubmit="return checkForm(this)">
这是可行的,但它有一个可怕的副作用:它不是异步提交表单,而是重定向到我的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>

var manualUploader=新qq.FineUploader({
元素:document.getElementById('fine-uploader-manual-trigger'),
模板:“qq模板手动触发”,
请求:{
端点:'./fine uploader/server/endpoint.php'
},
缩略图:{
占位符:{
waitingPath:'./fine uploader/placeholders/waiting generic.png',
notAvailablePath:“./fine uploader/placeholders/not_available-generic.png”
}
},
验证:{
允许的扩展:['png','jpg','jpeg','gif'],
项目限制:1,
大小限制:307200//300kb=(300kb*1024字节)=307200
},
回调:{
onComplete:函数(id、name、responseJSON){
if(responseJSON.success==true){
//location.href=“ManageAds.php”;
location.href=“index.php”;
}否则{
console.log(responseJSON);
//历史。go(0);
}
//console.log(responseJSON.success);
},
},
自动上载:false,
调试:错误,
多重:假
});
qq(document.getElementById(“触发器上载”)).attach(“单击”,函数(){
manualUploader.uploadStoredFiles();
});

当我的一个验证器失败时,如何防止表单提交?如果你有一些优雅的东西,内置在FineUploader中,那就太好了。如果没有,我会很高兴与任何类型的黑客,我只需要让这个工作。谢谢。

使用事件处理程序,而不是Submit上的内联
事件处理程序(您永远不应该使用)。此标准允许您为每个表单字段指定自定义限制。您还可以使用
setCustomValidity
方法查看对元素的更改并实际更新有效性。所有这些都由HTML5Web规范提供,代表了处理表单验证的现代方式。Fine Uploader将遵守任何此类约束

由于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
    }

非常适合我。

你能举一个具体的例子说明如何防止FineUploader提交吗?FineUploader不是一个因素。看看我链接到的约束API文档。您可以设置每个字段的约束,如果违反了这些约束,将阻止表单提交。我已经在使用那些每个字段的约束,这对于非常简单的事情来说是很好的。但我有一些约束,需要自定义javascript编程来确定是否发生了冲突。我需要一种方法来指示浏览器不提交基于自定义规则的表单。此外,简单地链接到另一个页面而不提供特定的示例被认为是堆栈溢出的错误做法,因为这通常没有帮助。示例是最好的。正如我在回答中提到的,您可以通过监视字段中的更改并根据需要调用表单或字段上的setCustomValidity来设置更复杂的限制。我链接到的文档也涵盖了这一点。此外,答案中不需要提供代码。正如你所看到的,我已经提供了很长一段时间的答案。你的问题很模糊,没有提到你希望实施的具体验证。如果你用具体的问题来更新你的问题,我会考虑用特定的代码更新我的答案。StueCuffError在Fiel-PieldRe.js中抛出运行时异常。这不是一个明智的选择,我也不会建议在你的应用程序中修改第三方代码,而不是对代码有很强的理解。你们声称一个WebAPI方法在FineUploader中抛出错误并没有多大意义。这可能是由于代码中的问题造成的。由于您尚未演示代码,因此无法进一步提供帮助。此外,您的建议还涉及修改精细的上传程序代码,而没有真正理解此操作的后果。我强烈反对这样做。相反,你要展示你所面临的问题,以便能够解决。雷,你在这篇文章中所说的一切都没有丝毫帮助。你的建议不起作用,你关于永远不做的事情的两个虚伪的断言都是愚蠢的。Onsubmit一直存在,很多网站/开发者都在使用它。如果这是一件“永远”不应该做的事情,浏览器制造商会删除它——但他们都没有。另外,如果调整第三方代码是唯一有效的方法,我会这么做。你现在可以回到你的象牙塔了。
_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
    }