jquery form validator never makes ajax call - php

Question

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 );
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
}
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";
}
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: 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?
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.

Answer 1

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.

Answer 2

Looking at your code you dont have to submit the form but make an ajax call but you say the form is getting submitted. I think there is some js error in the below peice of code because of which the form is getting submitted.
$.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...');
Why dont you prevent the default behavior of form submit.
function valid_pass_sett(e) {
e.preventDefaul();//This will ensure the form will never be submitted.
And in the callback method make a small change to unbind the submit handler and then submit the form. This is because we already have one submit handler and we dont want to call it next time when we submit in the below method.
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
}
}