暫停表單提交驗證

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文章。有沒有一個令人信服的理由，爲什麼這不是一個選項？