暂停表单提交验证

Question

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

这里是我的html：

<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;"> 
</div> 
<h1>Submit</h1> 
<form action="{{upload_url}}" target="upload_target" method="POST" id="file_upload_form" enctype="multipart/form-data"> 
    {% render_upload_data upload_data %} 
    <table>{{ form }}</table>  
    <p> 
     <input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" > 
    </p> 
    <p> 
     <input type="submit" id="file_upload_submit" value="Submit" /> 
    </p> 
    <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> 
</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('<span>'+data["message"]+'</span>'); 
        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('<span">'+data["message"]+'</span>'); 
        setTimeout(function(){ 
         $("#message").fadeOut("slow", function() { 
          $("#message").hide(); 
         }); 
        }, 1500);      
        return false; 
       } 
      } 
     }); 
     return false;   
    }); 

});  

</script> 

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

---

编辑

下面我的代码能够执行验证，然后当结果是正面表单提交时。现在，如果我硬编码表单的目标，我的警报不显示，我敢肯定，上传不执行（不幸的是，上传的清单每8小时刷新一次，我会知道它是否在一段时间内工作）。如果未指定目标，则文件将通过重定向进行上传，以便省略整个“提交”事件侦听器。

<script> 
    $('#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('<span>'+data["message"]+'</span>'); 
        setTimeout(function(){ 
         $("#message").fadeOut("slow", function() { 
          $("#message").hide(); 
         }); 
        }, 1500); 

        fileUploadForm.submit(); 

       } 
       else{ 
        $("#message").show(); 
        $("#message").fadeIn(400).html('<span">Response false</span>'); 
        setTimeout(function(){ 
         $("#message").fadeOut("slow", function() { 
          $("#message").hide(); 
         }); 
        }, 1500);      
        return false; 
       } 
      } 
     }); 
     return false;   
    }); 
</script> 

HTML：

<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;"> 
</div> 
<h1>Submit</h1> 
<form action="{{upload_url}}" method="POST" target="" id="file_upload_form" enctype="multipart/form-data"> 
    {% render_upload_data upload_data %} 
    <table>{{ form }}</table>  
    <p> 
     <input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" > 
    </p> 
    <p> 
     <input type="submit" style="display:none" id="true_upload_submit" value="Submit" /> 
    </p>  
    <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> 
</form> 
    <p> 
     <input type="submit" id="fake_upload_submit" value="Submit" /> 
    </p> 

Answer 1

我在想，你可能会思前想提交表单的，但我也可能会阅读这个错误。我可能也没有全部的事实。通过ajax调用提交表单并返回提交结果（验证失败或成功）是否会更好？

伪代码：

的jQuery：

var formData = data; 
ajax(formData); 

表格处理：

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

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

Answer 2

验证后您注册一个新的提交事件处理程序，但没有什么是提交表单，所以你将不得不再次单击该按钮把它提交。

你可以只提交而不是添加提交处理形式：

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

Answer 3

这将可能是最简单的你（如果可能更讨厌你的用户），如果你使用的同步XHR而不是异步的。

或者，如果服务器端验证成功，则拦截使用JavaScript的表单提交并使用XHR提交它。

Answer 4

如何避免这个问题干脆，有一个隐藏的提交按钮提交表单，并有明显的按钮启动验证和它是否可以那么它将对适当的隐藏点击提交按钮？

Answer 5

Guffa is correct。我相信下面的改变会使第一个脚本工作。更改

     $('#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()自身触发事件提交。如果提交函数返回false，它将不会继续，所以您必须改为返回true。

这是你发布的这个问题的第三个版本。我同意其他人的观点，即你可能以一种过于复杂的方式解决你的问题。在这种情况下，您可能希望完全避免使用JavaScript，并寻找一个直接的HTML文章。有没有一个令人信服的理由，为什么这不是一个选项？