jquery 表单验证器从不进行 ajax 调用

Question

这部分是此线程的延续： jquery - 从回调函数（在 post 请求中）返回值到其内部的函数？ 因为我更新了代码，但问题仍然存在。我正在使用 jquery 验证一个简单的 html 表单，尽管我所有其他 if/else 语句都有效，但 ajax 调用永远不会进行。这是 JavaScript 代码：

var pass_form = $('#pass_form'); pass_form.submit( valid_pass_sett );

function valid_pass_sett() {
    //remove old errors - snipped
    pass_old = $('input[name=pass_old]').val();
    pass_new = $('input[name=pass_new]').val();
    pass_confirm_new = $('input[name=pass_confirm_new]').val();

    if (pass_old === "") {
        //display error on form - snipped
        return false;
    } else if (pass_new === "") {
        //display error on form - snipped
        return false;
    } else if (pass_new != pass_confirm_new) {
        //display error on form - snipped
        return false;
    } else if (pass_new.length < 8) {
        //display error on form - snipped
        return false;
    } else {
        $.post("http://www.example.com/ajax/validate.php",{ // async validation
            type: 'valid_old_change_pass', 
            pass_old: pass_old,
            pass_new: pass_new
        }, valid_pass_combo_callback);
        alert('after the ajax call...');
    }
    return false;  // cancel form submission
}

这是 validate.php 的相关部分：

$username = $_SESSION['username'];
$pass_old = $_POST['pass_old'];
$pass_new = $_POST['pass_new'];
if (empty($pass_old) || empty($pass_new)) {
    echo "invalid";
} else if (!User::valid_user_pass($username, $pass_old)) {
    echo "invalid_old";
} else if (!Sanitize::is_legal_password($pass_new)) {
    echo "invalid_new";
} else {
    echo "valid";
}

当我使用 Firebug 进行调试并且所有其他表单输入都正确时，脚本会进行 ajax 调用，然后提交表单，即使它应该调用回调函数。这是回调函数的代码：

function valid_pass_combo_callback( data ) {
    if (data == 'valid') {
        //only if the form is valid!
        pass_form[0].submit();
    }
    else if (data == "invalid_old") {
        //display error on form - snipped
    }
    else if (data == "invalid_new") {
        //display error on form - snipped
    }
    else {
        //it always jumps to here..., even though data *is* the correct value
    }

}

编辑 redux：好的，我修复了回调函数中的错误，如第一个答案中所示，现在出现了一些不同的问题。我调试了函数 valid_pass_combo_callback 并且它从 validate.php 获取了正确的值；在本例中，invalid_old 是返回的值。当我调试时，data 等于invalid_old。但是，比较失败...因此无论如何，代码总是跳转到最后一个else语句。什么也没有发生，因为那里没有任何行为，那么为什么比较总是失败呢？

编辑，已解决：我决定放弃绑定此函数来提交，而是绑定到表单上按钮的 onclick 事件（我用它来代替提交按钮），这解决了问题。单击按钮时调用验证，如果客户端验证通过，则将表单提交到服务器进行验证。

Answer 1

这里的一个问题是您正在调用回调，而不是传递函数本身：

$.post("http://www.example.com/ajax/validate.php",{ // async validation
        type: 'valid_old_change_pass', 
        pass_old: pass_old,
        pass_new: pass_new
    }, valid_pass_combo_callback); // Remove (data) so the callback
                                   // isn't invoked immediately.

Answer 2

查看您的代码，您不必提交表单，而是进行 ajax 调用，但您说表单正在提交。我认为下面的代码中有一些 js 错误，因此表单被提交。

$.post("http://www.example.com/ajax/validate.php",{ // async validation
            type: 'valid_old_change_pass', 
            pass_old: pass_old,
            pass_new: pass_new
        }, valid_pass_combo_callback(data));//Here is the issue, it will call the method right away
        alert('after the ajax call...');

为什么不阻止表单提交的默认行为。

function valid_pass_sett(e) {

   e.preventDefaul();//This will ensure the form will never be submitted.

并在回调方法中进行一些小更改以取消绑定提交处理程序，然后提交表单。这是因为我们已经有一个提交处理程序，并且我们不想下次在下面的方法中提交时调用它。

function valid_pass_combo_callback( data ) {
    if (data === 'valid') {
        //only if the form is valid!
        pass_form[0].unbind('submit').submit();
    }
    else if (data === "invalid_old") {
        //display error on form - snipped
    }
    else if (data === "invalid_new") {
        //display error on form - snipped
    }
}