Doğrulama için form teslimini duraklat

Question

Bir iframe'e dosya yükleyen bir formum var. Ajax ile geçerli olup olmadığını kontrol edene kadar teslim edilmek istiyorum. Bunu nasıl yapabilirim ? Kodum gönderimi duraklatır ve doğrulama sonucunu döndürür (şu anda 'sonuç': 'true' döndüren bir kukla işlevdir) ancak 'gönder' eylemi gerçekleştirilmez. Ayrıca 200 durumu yanıt aldıktan sonra yanıt verilerinin gösterilmesi normal mi? I aşağıda kod ile http://ntt.vipserv.org/artifact/

---

DÜZENLEME

:

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

ve bağlantı İşte

benim html var Doğrulama yapabilir, sonuç olumlu olduğunda, form verilir. Şimdi formun hedefini sabitlerseniz, uyarım gösterilmez ve yükleme işleminin gerçekleştirilmediğinden eminim (ne yazık ki yükler listesi her 8 saatte bir yenilenir ve eğer bir süre çalışıp çalışmadığı bilinir). Hedef belirtilmemişse, dosya yeniden yönlendirmeyle yüklenir, böylece tüm 'submit' olay dinleyicisi silinir.

<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

Ben formun teslim düşünce üzerinde olabileceğini düşünüyorum, ama bir de bu yanlış okuma olabilir. Ayrıca tüm gerçeklere sahip olmayabilirim. Formu sadece ajax çağrısı ile göndermek ve gönderim sonucunu iade etmek (doğrulama başarısız veya başarılı) daha iyi olmaz mı?

sözde kod:

jQuery:

var formData = data; 
ajax(formData); 

Form İşleme: Gerekirse

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

gerçek kod sağlayabilir.

Answer 2

Doğrulama işleminden sonra yeni bir gönderici olay işleyicisini kaydettirirsiniz, ancak formu gönderecek hiçbir şey yoktur, bu nedenle iletiyi almak için düğmeyi tekrar tıklatmanız gerekir.

sadece yerine teslim işleyicisi ekleme formu gönderebilirsiniz:

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

Answer 3

zaman uyumlu XHR yerine uyumsuz kullanılırsa Muhtemelen (eğer muhtemelen daha can sıkıcı kullanıcılar için) sizin için en kolay olurdu. Alternatif olarak, JavaScript kullanarak form gönderimini durdurun ve sunucu tarafı doğrulaması başarılı bir şekilde XHR kullanarak gönderin.

Answer 4

Sorunun tamamen ortadan kaldırılmasına, formu göndermek için gizli bir gönderme düğmesine sahip olmanız ve doğrulama işlemini başlatan görünür bir düğmeniz olması durumunda, düzgün gizlenmiş gönder düğmesine bir tıklama gerçekleştirir mi?

Answer 5

Guffa is correct.Aşağıdaki değişimin ilk senaryoyu çalıştıracağına inanıyorum. Bu gönderme kırıldı senin ayıklama var

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

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

değiştirin. Sen gönderme olayı tetiklemek için kendi başına submit() çağırmalıdır

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

: Eğer hata ayıklama tutmak istiyorsanız, kod değiştirin. Gönderme işlevi false değerini döndürürse, devam etmeyecek, dolayısıyla bunun yerine true döndürmeniz gerekir.

Bu, gönderdiğiniz bu sorunun üçüncü sürümüdür. Başkalarına, probleminizi aşırı derecede karmaşık bir şekilde ele aldığınızı kabul ediyorum. Bu, JavaScript’ten tamamen kaçınmak ve basit bir HTML gönderisine gitmek isteyebileceğiniz bir durumdur. Bunun bir seçenek olmaması için zorlayıcı bir sebep var mı?