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

Answer 1

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.