jquery form validator never makes ajax call

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.

score 1 · Accepted Answer · answered Aug 12 '11 at 14:13

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.

answered Aug 12 '11 at 14:13

FishBasketGordo

22,904
4
58
91

That fixed the initial problem; I added more details to my question, though, because now I'm having another problem where the comparison *always* fails, even though `data` is storing the right value from validate.php. – Ricardo Altamirano Aug 12 '11 at 16:53
You should make a new question for the new problem. – FishBasketGordo Aug 12 '11 at 16:59
done: http://stackoverflow.com/questions/7043708/data-returned-from-ajax-always-failing-in-comparison Thank you again for the help. – Ricardo Altamirano Aug 12 '11 at 17:05

score 1 · Answer 2 · answered Aug 12 '11 at 14:19

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

Should I remove the onsubmit="return valid_pass_sett()" from my HTML code too? — Ricardo Altamirano, Aug 12 '11 at 17:07
I removed the `onsubmit="return valid_pass_sett()"` from my HTML code and changed my `pass_form.submit()` binding to reflect yours. Thank you for the help! — Ricardo Altamirano, Aug 12 '11 at 17:37
Actually, no, the form isn't submitting at all. I re-added the `onsubmit="return valid_pass_sett()"` to my HTML form, but when all the fields validate correctly and I click submit, nothing happens. — Ricardo Altamirano, Aug 12 '11 at 18:09

jquery form validator never makes ajax call

2 Answers2

Linked