event.preventDefault ? event.preventDefault() : event.returnValue = false; not working in IE8

Question

The Form still submits in IE even though there is preventdefault and returnvalue = false. Everything is fine in Chrome and firefox.

I have also tried event.stopPropagation().

$('#form1').submit(function(event) {
    var xxx = $('#xxx').val();
    var yyy = $('#yyy').val();
    var zzz = $('#zzz').val();
    var uuu = $('#uuu').val();
    if (zzz != '000000' && zzz != '') {
        validate_xxxyyy(uuu, function(response) {
            if (response === false) {
                if (xxx == '') {
                    alert("XXX undefined!");
                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
                }
                else if (yyy == '') {
                    alert("yyy Undefined!");
                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
                }
            }
            else {
                return true;
            }
        });
    }
    else {
        return true;
    }
});

function validate_xxxyyy(uuu, callback) {
    var data_string = 'uuu=' + uuu;
    $.ajax({
        url: 'ajax.php',
        type:'POST',
        data: data_string,
        dataType: 'json',
        cache: false,
        async: false,
        success: function(response){
            callback(response);
        }
    });
}

Answer 1

Your issue is around deffered functions.

your success function in:

$.ajax({
        url: 'ajax.php',
        type:'POST',
        data: data_string,
        dataType: 'json',
        cache: false,
        async: false,
        success: function(response){
            callback(response);
        }
    });

Is defferred. Think of it as threaded. So the submit continues without waiting for the callback to happen. So it doesn't call event.preventDefault(), or more precisly, it does but it's too late, the submit has already returned.

I would change what ever is calling this from a submit button (which I'm guessing it is currently) to a normal button then validate it, then only submit the form if this validation succeeds using $('form').submit();.

$('#button').click(function(event) {
    var xxx = $('#xxx').val();
    var yyy = $('#yyy').val();
    var zzz = $('#zzz').val();
    var uuu = $('#uuu').val();
    if (zzz != '000000' && zzz != '') {
        validate_xxxyyy(uuu, function(response) {
            if (response === false) {
                if (xxx == '') {
                    alert("XXX undefined!");

                }
                else if (yyy == '') {
                    alert("yyy Undefined!");

                }
            }
            else {
                $('#form1').submit();
            }
        });
    }
    else {
        $('#form1').submit();
    }
});

function validate_xxxyyy(uuu, callback) {
    var data_string = 'uuu=' + uuu;
    $.ajax({
        url: 'ajax.php',
        type:'POST',
        data: data_string,
        dataType: 'json',
        cache: false,
        async: false,
        success: function(response){
            callback(response);
        }
    });
}

Answer 2

Start by preventing the form from submitting, do the ajax call for validation asynchronously, and if it validates you submit with the native submit which is not captured by the event handler :

$('#form1').on('submit', function(event) {
    event.preventDefault();
    var self = this,
        xxx  = $('#xxx').val(),
        yyy  = $('#yyy').val(),
        zzz  = $('#zzz').val(),
        uuu  = $('#uuu').val();

    if (zzz != '000000' && zzz != '') {
        validate_xxxyyy(uuu).done(function(response) {
            if (!response) {
                if (xxx == '') {
                    alert("XXX undefined!");
                }
                else if (yyy == '') {
                    alert("yyy Undefined!");
                }
            }
            else {
                self.submit();
            }
        });
    } else {
        self.submit();
    }
});

function validate_xxxyyy(uuu) {
    var data_string = 'uuu=' + uuu;
    return $.ajax({
        url: 'ajax.php',
        type:'POST',
        data: data_string,
        dataType: 'json',
        cache: false
    });
}

Answer 3

Put : event.preventDefault() first like:

$('#form1').submit(function(event) {
    event.preventDefault();
    var xxx = $('#xxx').val();
    var yyy = $('#yyy').val();
    ...

Or you will need to override form onsubmit event to prevent submitting:

Answer 4

$('#form1').submit(function(event) {
    var xxx = $('#xxx').val();
    var yyy = $('#yyy').val();
    var zzz = $('#zzz').val();
    var uuu = $('#uuu').val();
    if (zzz != '000000' && zzz != '') {
        validate_xxxyyy(uuu, function(response) {
            if (!response) {
                if (xxx == '') {
                    alert("XXX undefined!");
                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
                }
                else if (yyy == '') {
                    alert("yyy Undefined!");
                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
                }
            }
            else {
                return true;
            }
        });
    }
    else {
        return true;
    }
});