暂停表单提交以进行validation

我有一些表单，它在iframe中上传文件。 我想保留它的提交，直到我检查它是否与ajax有效。 我怎样才能做到这一点 ？ 我的代码暂停提交并返回validation结果（当前只是一个返回’result’：’true’的虚函数）但是然后不执行’submit’操作。 在获得响应200状态后显示响应数据需要~2秒是否正常？

这是我的HTML：

 
 
Submit
 
 {% render_upload_data upload_data %} {{ form }} 
  
 
  
   

JS：

 $(function() { $('#file_upload_submit').click(function(e){ e.preventDefault(); var fileUploadForm = document.getElementById('file_upload_form'); $.ajax({ type: "POST", url: '/artifact/upload/check-form/', data: 'foo=bar', dataType: "json", success: function(data){ if(data['result'] == "true"){ $("#message").show(); $("#message").fadeIn(400).html(''+data["message"]+''); setTimeout(function(){ $("#message").fadeOut("slow", function () { $("#message").hide(); }); }, 1500); $('#file_upload_form').attr('target','upload_target').submit(function(){ alert('Handler for .submit() called.'); return false; }); } else{ $("#message").show(); $("#message").fadeIn(400).html(''+data["message"]+''); setTimeout(function(){ $("#message").fadeOut("slow", function () { $("#message").hide(); }); }, 1500); return false; } } }); return false; }); });  

和链接： http ： //ntt.vipserv.org/artifact/

---

编辑

使用下面的代码，我能够执行validation，然后当它的结果是肯定的forms提交。 现在，如果我对表单进行硬编码，我的警报就不会显示，而且我很确定没有执行上传（不幸的是，上传列表每8小时刷新一次，如果它在一段时间内有效，我会知道）。 如果未指定target，则使用重定向上载文件，以便省略整个“submit”事件侦听器。

  $('#fake_upload_submit').click(function(e){ e.preventDefault(); var fileUploadForm = document.getElementById('file_upload_form'); fileUploadForm.addEventListener("submit", function() { alert("sent in iframe"); fileUploadForm.target = 'upload_target'; }, false); $.ajax({ type: "POST", url: '/artifact/upload/check-form/', data: 'foo=bar', dataType: "json", success: function(data){ if(data['result'] == "true"){ $("#message").show(); $("#message").fadeIn(400).html(''+data["message"]+''); setTimeout(function(){ $("#message").fadeOut("slow", function () { $("#message").hide(); }); }, 1500); fileUploadForm.submit(); } else{ $("#message").show(); $("#message").fadeIn(400).html('Response false'); setTimeout(function(){ $("#message").fadeOut("slow", function () { $("#message").hide(); }); }, 1500); return false; } } }); return false; });  

HTML：

 
 
 
Submit
 
 {% render_upload_data upload_data %} {{ form }} 
  
 
  
  
 
   

Answer 1

在validation之后，您注册了一个新的提交事件处理程序，但没有提交表单的内容，因此您必须再次单击该按钮才能将其提交。

您只需提交表单而不是添加提交处理程序：

 $('#file_upload_form').attr('target','upload_target').submit(); 

Answer 2

我在想你可能在考虑提交表格，但我也可能会读错了。 我也可能没有所有的事实。 通过ajax调用提交表单并返回提交结果（validation失败或成功）不是更好吗？

伪代码：

jQuery的：

 var formData = data; ajax(formData); 

表格处理：

 if(valid) { submit(formData); return true; } else { return false; } 

如果需要，我可以提供真实的代码。

Answer 3

如果你使用同步XHR而不是异步，那对你来说可能是最简单的（如果你的用户可能更烦恼）。

或者，使用JavaScript拦截表单提交，如果服务器端validation成功，则使用XHR提交表单。

Answer 4

如何完全避免这个问题，有一个隐藏的提交按钮来提交表单，并有一个可见的按钮，开始validation，如果没关系，那么它会执行一次点击正确的隐藏提交按钮？

Answer 5

Guffa是对的 。 我相信以下更改将使第一个脚本工作。 更改

  $('#file_upload_form').attr('target','upload_target').submit(function(){ alert('Handler for .submit() called.'); return false; }); 

至

  $('#file_upload_form').attr('target','upload_target').submit(); 

这是你的调试破坏了提交。 如果要保持调试，请将代码更改为：

  $('#file_upload_form').attr('target','upload_target').submit(function(){ alert('Handler for .submit() called.'); return true; }).submit(); 

您必须自己调用submit()来触发提交事件。 如果submit函数返回false ，则它将不会继续，因此您必须让它返回true 。

这是您发布的此问题的第三个版本。 我同意其他人的观点，即您可能会以过于复杂的方式解决您的问题。 在这种情况下，您可能希望完全避免使用JavaScript并转到简单的HTMLpost。 有没有令人信服的理由说明这不是一个选择？