Client-side Custom JavaScript Validation

[zibrahim]

Hello everyone
Regarding the new Client-side Custom JavaScript Validation function, I have a question.
I have the following code in the inspection-dv,js with an AJAX to get the duplicate count (check for any duplicate).

Code: Select all

// >> Custom Validation Scripts 
function inspection_customValidateData(insertMode) {

    // check if similar pier already inserted in this inspection series
    var pier_id = parseInt($j("#pier_id").val());
    var inspection_series_id = parseInt($j("#inspection_series_id").val());
    if (inspection_series_id) {
        $j.ajax({
            url: 'hooks/ajax-check_duplicate_inspection_in_series.php',
            dataType: "json",
            async: false,
            data: {
                pier_id: pier_id,
                inspection_series_id: inspection_series_id,
            },
            success: function (data) {
                console.log(data[0]);
                if (data[0] > 0) {
                    console.log('Hello World');
                    return false;
                }
            },
        });
    }

    // if all is ok, return true to proceed
    return true;
};

I managed to see the Hello World in console, but the return false seems not working as it proceed saving the record.
Can someone help me on this?
Thanks.

[jsetzer]

I guess your function returns true long before (async) AJAX request completes. In think async=false is deprecated and will not work that way.

You could check order of returns by using console.log before each return statement and check "preserve log" in dev console settings.

For async checks, I'm afraid that sync validation function will not work. Perhaps validate .on('change', ...) and disable #update button.

[a.gneady]

async is deprecated only when using the jQuery.Deferred syntax. So it should work in the above code according to https://api.jquery.com/jQuery.ajax/

However, the issue in your code is that the return false statement returns false from the success callback not the inspection_customValidateData function. Instead of return false, try setting a flag like duplicate = true (define it at the beginning of inspection_customValidateData then set it inside the success callback), then check it after the ajax call .. something like this:

Code: Select all

// >> Custom Validation Scripts 
function inspection_customValidateData(insertMode) {

    let duplicate = false;

    // check if similar pier already inserted in this inspection series
    var pier_id = parseInt($j("#pier_id").val());
    var inspection_series_id = parseInt($j("#inspection_series_id").val());
    if (inspection_series_id) {
        $j.ajax({
            url: 'hooks/ajax-check_duplicate_inspection_in_series.php',
            dataType: "json",
            async: false,
            data: {
                pier_id: pier_id,
                inspection_series_id: inspection_series_id,
            },
            success: function (data) {
                console.log(data[0]);
                if (data[0] > 0) {
                    console.log('Hello World');
                    duplicate = true;
                }
            },
        });
    }

    return duplicate;
};

[zibrahim]

It is working as expected. Thank you Ahmed & Jan !!!