Reply to thread

Yeah I am working on recoding this, I see what my issue is.

It is expecting you to use the 'success' method to invoke the behavior you are expecting. So I am going to make an async function to control my message to the display, and hope it works, aha.

[automerge]1607912205[/automerge]

Got it working. I recoded the system to use the 'Success' method as recommended by about every article I could find.

Here is the page now updating:

(First: The entry is 10 digits, and unique)

(Second: The entry is 10 digits, already taken)

(Third: The entry is 10 digits, available)

[ATTACH=full]11769[/ATTACH]

Thanks for the help! Here is what I ended up doing:

Added another anonymous function into my class for custom validation:

Here I tell it which index to use for the validation number, and whether it is invalid or valid

[CODE]addAsyncInvalidity: function(index, isInvalid){

        this.addInvalidity(this.validityChecks[index].invalidityMessage);

       

        var requirementElement = this.validityChecks[index].element;

        if (requirementElement) {

            if (isInvalid) {

                requirementElement.classList.add('invalid');

                requirementElement.classList.remove('valid');

            } else {

                requirementElement.classList.remove('invalid');

                requirementElement.classList.add('valid');

            }

        }

    }[/CODE]

I used one single function:

[CODE]async function checkPhoneNumber(input, index) {

    var username = 'User';

    var password = 'Pass';

    var url = 'http://127.0.0.1/app/api/api.php';

   

    var postData = {

        "type" : 'GET',

        "action" : 'phone_exists',

        "phone" : input.value,

    };

   

    $.ajax({

        url: url,

        type: 'GET',

        dataType: 'json',

        data: postData,

        contentType: 'application/json',

        beforeSend: function(xhr) {

            xhr.setRequestHeader("Authorization", "Basic "+btoa(username+':'+password));

        },

        success: function(resultData){

            if (!Array.isArray(resultData['data']) || resultData['data'].length === 0)

                return true;

       

            var exists = resultData['data'][0];

            input.CustomValidation.addAsyncInvalidity(index, exists);

        }

    });

}[/CODE]

And to call that function for validation:

[CODE]isInvalid: async function(input) {

    const regex = RegExp(/\d{10}$/);

    if (!regex.test(input.value))

    return true;

    checkPhoneNumber(input, 1); //0 Based

    return false; //Async function will update later to set the true state of invalid

}[/CODE]