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

Question

这部分是该线程的延续： jquery - 从回调 function （在发布请求中）返回值到 function 它的内部？ 因为我更新了代码，但问题仍然存在。 我正在使用 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。 这是回调 function 的代码：

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：好的，我修复了回调 function 中的错误，如第一个答案所示，现在出现了一些不同的问题。 我调试了 function valid_pass_combo_callback并从 validate.php 中获得了正确的值； 在这种情况下， invalid_old是返回的值。 当我调试时， data等于invalid_old 。 但是，比较失败......所以代码总是跳转到最后一个 else 语句，无论如何。 什么都没有发生，因为那里没有任何行为，那么为什么比较总是失败？

编辑，已解决：我决定放弃绑定此 function 以提交，而是绑定到 onclick 事件以获取表单上的按钮（我正在使用该按钮代替提交按钮）并解决了问题。 单击按钮时调用验证，如果客户端验证通过，则将表单提交到服务器进行验证。

Answer 1

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

$.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
    }
}