jquery表单验证器从不使ajax调用 [英] jquery form validator never makes ajax call

问题描述

这部分是此主题的延续： jquery - 从回调函数（在请求后）返回值到其内部的函数？
因为我更新了代码，但是麻烦依然存在。我使用jquery验证一个简单的html表单，尽管所有我的其他if / else语句工作，ajax调用永远不会得到。这里是javascript代码：

This is partly a continuation from this thread: jquery - return value from callback function (in post request) into the function its inside of? because I updated the code, yet trouble persists. I'm validating a simple html form with jquery, and despite all my other if/else statements working, the ajax call never gets made. Here's the javascript code:

var pass_form = $（'＃pass_form'）;
pass_form.submit（valid_pass_sett）;

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的相关部分：

and here's the relevant part of the 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调用，然后提交表单，即使它应该调用回调函数。这是回调函数的代码：

When I'm debugging with Firebug, and all other form inputs are correct, the script gets to the ajax call, then submits the form, even though it's supposed to call the callback function. This is the code for the callback 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
    }

}

EDIT redux：错误在我的回调函数中，如第一个答案所示，现在，有一点不同的问题出现了。我调试函数 valid_pass_combo_callback ，它从validate.php获取正确的值;在这种情况下， invalid_old 是返回的值。当我调试时， data 等于 invalid_old 。但是，比较失败...所以代码总是跳转到最后一个else语句，无论什么。没有什么发生，因为没有任何行为，所以为什么比较总是失败？

EDIT redux: Ok, I fixed the error in my callback function, as seen in the first answer, and now, a bit of a different problem has emerged. I debugged the function valid_pass_combo_callback and it's getting the correct value from validate.php; in this case, invalid_old is the value being returned. When I debug, data is equal to invalid_old. However, the comparison fails... so the code always jumps to the last else statement, no matter what. Nothing happens, because there isn't any behaviour there, so why is the comparison always failing?

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

EDIT, SOLVED: I decided to forgo binding this function to submit, and instead bound to an onclick event for a button on the form (which I'm using in place of a submit button) and that solved the problem. Validation is called when the button is clicked, and if client-side validation passes, then the form is submitted to the server for validation there.

推荐答案

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

One problem here is you're invoking your callback, not passing the function itself:

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

这篇关于jquery表单验证器从不使ajax调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！