暂停表单提交以进行验证

Question

我有一些表单，可以在 iframe 中上传文件。我想保留它的提交，直到我检查它是否对 ajax 有效。我该怎么做？我的代码暂停提交并返回验证结果（当前只是一个返回“结果”：“true”的虚拟函数），但随后不执行“提交”操作。另外，在获得响应 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

验证后，您注册了一个新的提交事件处理程序，但没有任何内容提交表单，因此您必须再次单击该按钮才能提交表单。

您可以只提交表单，而不添加提交处理程序：

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

Answer 2

我认为您可能对表格的提交考虑过多，但我也可能读错了。我也可能没有掌握所有事实。通过ajax调用提交表单并返回提交结果（验证失败或成功）不是更好吗？

伪代码：

jQuery：

var formData = data;
ajax(formData);

表单处理：

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

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

Answer 3

如果您使用同步 XHR 而不是异步，这对您来说可能是最简单的（如果可能对您的用户来说更烦人）。

或者，使用 JavaScript 拦截表单提交，并在服务器端验证成功时使用 XHR 提交。

Answer 4

如何完全避免这个问题，有一个隐藏的提交按钮来提交表单，并有一个可见的按钮来开始验证，如果可以，那么它会执行单击正确的隐藏提交按钮？

Answer 5

古法是正确的。我相信以下更改将使第一个脚本起作用。更改

                     $('#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 帖子。是否有令人信服的理由表明这不是一个选择？