Envío de formulario de pausa para la validación

Question

Tengo algún formulario, que carga el archivo en un iframe. Me gustaría mantener su presentación hasta que verifique si es válida con ajax. Cómo puedo hacer esto ? Mi código pausa el envío y devuelve el resultado de validación (actualmente solo una función ficticia que devuelve 'resultado': 'verdadero') pero luego la acción 'enviar' no se realiza. También ¿Es normal que tome ~ 2s para mostrar los datos de respuesta después de obtener el estado de la respuesta 200?

Aquí es mi 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> 

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

---

EDITAR

Con el código de abajo me Soy capaz de realizar la validación, y luego cuando el resultado es una forma positiva se envía. Ahora si codigo el objetivo para el formulario, mi alerta no se muestra y estoy bastante seguro de que la carga no se realiza (desafortunadamente la lista de cargas se actualiza cada 8h sa sabré si funcionó en algún momento). Si no se especifica el destino, el archivo se carga con la redirección de modo que se omite todo el proceso de escucha 'de envío'.

<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

estoy pensando que podría estar pensando sobre la presentación de la forma, pero también pueden estar leyendo este mal. Es posible que tampoco tenga todos los hechos. ¿No sería mejor simplemente enviar el formulario a través de la llamada ajax y devolver el resultado de la presentación (la validación falló o tuvo éxito)?

pseudo código:

jQuery:

var formData = data; 
ajax(formData); 

procesamiento de formularios:

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

puedo proporcionar el código real si es necesario.

Answer 2

Después de la validación, registra un nuevo controlador de eventos de envío, pero no hay nada que envíe el formulario, por lo que tendrá que hacer clic en el botón nuevamente para enviarlo.

puede simplemente enviar el formulario en lugar de añadir un controlador de presentar:

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

Answer 3

probablemente sería más fácil para usted (si es posiblemente más molesto para los usuarios) si se ha utilizado XHR sincrónica en lugar de asíncrono.

Alternativamente, intercepte el envío del formulario usando JavaScript y envíelo usando XHR si la validación del lado del servidor tiene éxito.

Answer 4

¿Qué tal si evitamos el problema por completo, con un botón de envío oculto para enviar el formulario y un botón visible que inicia la validación y si está bien, entonces hace clic en el botón de envío oculto correcto?

Answer 5

Guffa is correct.Creo que el siguiente cambio hará que el primer script funcione. Cambiar

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

a

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

Es su depuración que se ha roto la presentación. Si desea mantener la depuración, cambie el código para:

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

Debe llamar submit() por sí solo para desencadenar el evento de presentación. Si la función de envío devuelve false, no continuará, por lo que debe tener que devolver true en su lugar.

Esta es la tercera versión de esta pregunta que ha publicado. Estoy de acuerdo con otros en que puede estar abordando su problema de una manera que es demasiado complicada. Este es un caso en el que es posible que desee evitar el JavaScript por completo y optar por una publicación HTML directa. ¿Hay alguna razón de peso para que esto no sea una opción?