防止在某些情况下提交表格

我的FineUploader除了1个场景以外都很好用。在某些情况下，我的某个表单元素（如文本框或下拉列表）具有无效数据。我想在这种情况下防止上传发生。不管怎样，FineUploader会绕过我的表单验证并提交，只要选择了有效的图像。这里是我的表单标签：防止在某些情况下提交表格

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

我checkForm()函数正确返回真/假回到形式的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中，那就太棒了。如果没有，我会很高兴与任何类型的黑客，我只需要得到这个工作。谢谢。

来源

2016-06-11 HerrimanCoder

-1

由于setCustomValidity抛出细uploader.js内运行时异常，我能找到防止细上传从与自定义验证问题之中上传持续的最好办法就是要做到这一点：

_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 
    }

适合我。

来源

2016-06-18 17:28:28 HerrimanCoder

这不是一个明智的选择，而且我也不会建议在您对应用程序没有很强的理解的情况下修改第三方代码。您声称Web API方法在罚款上传器中引发错误并没有多大意义。这可能是由于代码中的问题。由于您没有演示过您的代码，因此无法进一步提供帮助。此外，您的建议涉及修改优良的Uploader代码，但不真正了解此操作的后果。我强烈劝阻这一点。相反，要证明你正在解决的问题。 –

雷，你在这篇文章中所说的没有任何帮助。你的建议不起作用，你对关于永远不会做的事情的两个伪善论断都是愚蠢的。 Onsubmit一直存在，许多网站/开发人员使用它。如果这是“永远”不应该做的事情，那么浏览器制造商将会删除它 - 但它们都没有。另外，如果调整第三方代码是唯一有效的工作，我会去做。你现在可以回到你的象牙塔了。 – HerrimanCoder

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

来源

2016-06-11 21:14:33

你可以举一个具体的例子来说明如何防止FineUploader提交？ – HerrimanCoder

Fine Uploader在这里不是一个因素。看看我链接的约束API文档。您可以设置每个字段的约束，如果违反，将阻止表单提交。 –

我确实读过这个，它对我的场景没有帮助。我已经在使用那些每个字段的约束，这对于非常简单的事情来说很好。但我有约束，需要自定义JavaScript编程来确定是否发生违规行为。我需要一种方法来指导浏览器不要根据自定义规则提交表单。另外，仅仅链接到另一个页面而不提供具体的例子在堆栈溢出中被认为是不好的做法，因为它通常没有帮助。例子是最好的。 – HerrimanCoder

防止在某些情况下提交表格

回答

相关问题