javascript - jquery ajax onsubmit 表单错误

Question

我有一个下面给出的表格

    <form name="frm_dcg" id="frm_dcg" method="post" enctype="multipart/form-data" action="" onsubmit="return validate_form();" >
            <div class="login-form">
                <div class="sign-in-htm">
-----------other codes-------

和jquery函数

function validate_form(){
    var run_name = $("#run_name").val();        
        $.ajax({
            url: "check_folder.php",
            type: "POST",
            data: "run_name="+run_name,
            success: function (response) {
                if(response=="OK"){                     
                con = confirm("File already exists.. Do you want to replace existing file?");                               
                        if(con==true){
                            return true;
                        }else{
                            return false;
                        }
                } else{
                    return true;
                }
                return false;
            }
        });
}

ajax 工作正常，但问题是表单在任何条件下都会提交。即使它返回 false。请仔细检查我的代码，如果有任何逻辑错误，请告诉我。

Answer 1

Ajax 是一个异步函数，这意味着您调用的return false 发生在提交表单之后。

相反，您必须在 validate_form() 函数末尾添加 return false。

function validate_form(){
    var run_name = $("#run_name").val();        
    ...
   return false; // <-- before the ending curly brace
}

请注意，表单应始终返回 false。您可以验证 run_name，使用它来决定是否应该执行 ajax 请求。

function validate_form(){
    var run_name = $("#run_name").val(); 
    if (run_name.length > 5) { // just an example
        // do ajax request
    } else {
        // show invalid message
    }
    return false; // always false so the form doesn't submit.
}