Retarder soumission du formulaire de téléchargement de fichier jusqu'à ce qu'il soit validé

Question

Possible en double:
Pause form submission for validation

Il est une continuation de this poste. Donc, je télécharge un fichier dans un iframe. Mais avant de soumettre, je prends des données du formulaire et j'utilise le système intégré de django pour vérifier leur validité (actuellement c'est juste une fonction fictive qui prend foo: bar, et renvoie json result = "true"). J'utilise deux boutons - faux visible, qui appelle la validation et deuxième - caché, qui soumet le formulaire. Avec le code ci-dessous, je suis en mesure d'effectuer une validation, puis lorsque le résultat est positif, le formulaire est soumis. Maintenant si je code en dur cible pour le formulaire, mon alerte n'est pas affichée et je suis assez sûr que le téléchargement n'est pas effectué (malheureusement la liste des uploads est rafraichie chaque 8h donc je saurai si cela a fonctionné dans un certain temps). Si la cible n'est pas spécifiée, le fichier est téléchargé avec la redirection, de sorte que tout l'écouteur d'événement 'submit' est omis. Quoi de plus, tout le code ne fonctionne pas du tout dans Chrome. Et il faut 2-3s (en regardant firebug) entre recevoir la réponse de la validation, et l'afficher que je n'ai jamais vu auparavant. Je suis vraiment désespéré de le faire fonctionner, puisque j'ai déjà perdu 2 jours et sans aucun résultat.

lien de l'échantillon:

http://ntt.vipserv.org/artifact/

JS:

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

---

EDIT:

débogueur IE montre Object doesn't support this property or method pour:

fileUploadForm.addEventListener("submit", function() { 
     alert("sent in iframe"); 
     fileUploadForm.target = 'upload_target'; 
    }, false); 

en raison de l'utilisation addEventListener, mais pas plus d'erreurs. Firebug est propre. Dans Chrome:

"Impossible de charger la ressource" à la forme de contrôle. Ceci est intéressant, puisque le résultat à .../check-form/est:

{ 
message: "Response = True" 
result: "true" 
} 

me semble donc bien. J'ai essayé aussi data.message au lieu de data ["message"] mais rien ne change.

Answer 1

Peut-être un peu une solution ennuyeuse, mais c'est la joie de travailler avec Javascript. Laissez la communication entre le navigateur et le serveur complètement à Javascript, et non au HTML. Signification:

• Lorsque vous écrivez votre code HTML, ignorez l'action; changez les boutons de soumission en boutons réguliers.
• Exécutez la validation via ajax (comme c'est le cas maintenant), et si la validation est réussie, appelez une nouvelle fonction qui gérera l'entrée du formulaire.
• Cette forme soumettant fonction affiche le message que vous vouliez, et après cela ajoutera l'action à la forme, et se déroulera form.submit();

Hope this helps

Answer 2

Regardez, vous n'avez pas pour utiliser fileUploadForm.addEventListener("submit", function(){...}, false). C'est exactement ce que fait $(fileUploadForm).submit(function(){...}), et il a l'avantage de fonctionner sur tous les navigateurs.