Trying to validate results after doing an ajax call

Question

Alright so i have form validation function.the function runs through form validation functions that returns false if the field isn't valid.

The problem is when it get to the function that uses ajax to check if the field is valid.

for some reason its seems that it doesn't "wait" for ajax to return and returns false automatically.

is there a way around this?

Here is the code:

function form_validation(){

    if (!NewValidationForm('pcode', 'Please fill in all the fields'))
        return false;
    if (!NewValidationForm('fname', 'Please fill in all the fields'))
        return false;

    if(!validate_coupon()){
        alert("bad!!");
        return false;
    }

    return true;
}

function validate_coupon(){
    var url = $j("#site_url").val() + 'ajax_functions.php';
    var coupon = $j("#pcode").val();
    var result_status = false; // seem its jumps from here to:

    $j.ajax({
    type: "POST",
    url: url,
    data: { ajax: 'ajax', coupon: coupon}
    }).success(function(insertID){
        var obj = $j.parseJSON(insertID);
        if(obj.status == 1){
            result_status = true;
        }
    });
    // straight over here
    if(result_status == true){
        return true;
    }
}

_"for some reason"_ - That would be because Ajax is asynchronous. It's completely normal for the `$.ajax()` call to return immediately, and for your success (or error) callback to be invoked later. You should restructure your code a little so that whatever you want to do after successful validation is done from your Ajax success handler. — nnnnnn, Dec 08 '12 at 02:04
that's kind of a problem i am trying to let people submit a form only if the fields validates and so i made it to return false until a true is returned from the validation functions. i tried submitting the form when the ajax call is return but that doesnt seem to work — Neta Meta, Dec 08 '12 at 02:06

Emily · Accepted Answer · 2012-12-08T02:46:56.240

Usually in this situation I do something like this in $(document).ready():

$('form').submit(function (evt) {
    if (!$(this).attr('data-submitted')) {
        evt.preventDefault();
        $(this).attr('data-submitted', 'true');
        // call your form validation code here that fires the ajax request
        return false;
    }
    return true;
});

Then, in your $.ajax callback, when your validation completes, call $('form').submit(). This effectively uses an attribute on the form as a flag for whether the state of the validation request. When the user first submits the form, the flag gets set and the validation process begins. When the validation completes, the form's submit event is triggered, and since the flag is set, this time the form gets submitted like normal.

If this approach works for you, you'll probably want to add a little polish. For example, you'll probably want to disable the submit button before calling $.ajax and enable it again if the validation fails. You'll also probably want to remove the data-submitted attribute from the form if the validation fails, since the user might submit the form a second time and you presumably want to perform another validation in that case.

I just edited: call $("form").submit() instead of triggering the button click. And make sure your submit button does not have name="submit"; see http://stackoverflow.com/questions/729330/jquery-triggersubmit-breaking. — Emily, Dec 08 '12 at 02:47

Trying to validate results after doing an ajax call

1 Answers1