Question

我有一个验证脚本首先验证我的表单，如果一切正常，它将返回true（显然PHP检查也会在之后完成）。

我还有一个JavaScript函数，可以上传图像并显示进度条，这就是出现问题的地方，表单在图像上传时仍在提交，如果它上传的话应该返回false。

表格提交电话：

<form action="php/submitMessage.php" onsubmit="return !!(validation(this) && submitFile('image','reviewUpload'));" method="post" id="submitMessage">

验证脚本：

function validation(form) {
    var inputs = form.elements;
    var errors = Array();

    for(var i=0;i<inputs.length;i++) {
        if (inputs[i].getAttribute("rules") != null && inputs[i].getAttribute("rules") != "") {
            var re = new RegExp(inputs[i].getAttribute("rules"));
            var OK = re.test(inputs[i].value);

            if (!OK) {
                inputs[i].style.backgroundColor = "#e39d9d";
                errors.push(false);
            } else {
                inputs[i].style.backgroundColor = "#6dcd6b";
                errors.push(true);
            }
        }
    }

    //Check array for any errors
    if (errors.indexOf(false) == -1) {
        return true;
    } else {
        return false;
    }
}

这是我的图片上传脚本，人们不需要添加图片，所以我已经让它返回true如果没有选择图像。

function submitFile(fileId,buttonId) {
    //Has a file been selected
    if (doc(file).value != "") {
        //Generate a new form
        var f = document.createElement("form");
        f.setAttribute("method", "POST");
        f.setAttribute("enctype", "multipart/form-data");

        //Create FormData Object
        var formData = new FormData(f);

        //Append file
        formData.append("image", doc(file).files[0], "image.jpg");

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "php/uploadImage.php", true);
        xhr.onload = function(e) {
            if (xhr.status == 200) {
                if (xhr.responseText == "true") {
                    return true;
                } else if (xhr.responseText == "false") {
                    return false;
                }
            } else {
                console.log("error!");
                console.log("Error " + xhr.status + " occurred when trying to upload your file");
            }
        };

        //Progress
        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                var currentPercentage = Math.round(e.loaded / e.total * 100)-1;
                document.getElementById(buttonId).innerHTML = "UPLOAD IMAGE " + currentPercentage + "%";
                document.getElementById(buttonId).style.backgroundSize = (currentPercentage+1) + "% 100%";
                if (currentPercentage==99) {
                    document.getElementById(buttonId).innerHTML = "Processing image";
                }
            }
        };

        //Send data
        xhr.send(formData);
    } else {
        return true;
    }
}

编辑：

function handleSubmit() {
    //Validate the form
    var valid = validation(this);
    var formElement = this;

    //Check if validation passes
    if (valid == true) {
        //code here...
    } else {
        return false;
    }
}

即使validation()返回false，表单仍在提交。

表格开头：

<form action="php/submitMessage.php" method="post" id="messageForm">

Answer 1

将此内容写成@Martin Ball所说的答案

您可以编写单个提交处理程序来执行验证检查和图像上传，以更好地控制情况。回到你的问题，因为图像上传是异步的，所以调用提交功能不会等待完成上传。您应该处理成功回调并在上传成功后提交，并且单独的提交处理程序将有助于它。 e.g。

preventDefault

修改如果您想要停止提交表单，则需要告知事件停止执行默认操作，即function handleSubmit (ev) { var isValid = validation(this); if(!valid) { ev.preventDefault(); return false; } // further handling of submit action. }。

请参阅此Terraform repo了解演示和代码示例。

TLDR;

div ul{ list-style-type:none; } div ul:before, div ul:after { content:""; display:table; } div ul:after { clear:both; } ul li{ font-weight:700; float:left; width:48%; }

在上传图片之前不要提交表单

1 个答案: