Javascript Show Button If Functions Return True

Question

I'm trying to do a registration form. I'm checking 6 thing with three function if everything okey function returns true else false. First function checks Username length, username characters and username availability. Second function checks email validation and email availability. Third function checks pass match. Functions working good everything is okey until here. But I want to hide button at the first then if all the functions return true I want to show button. But It doesn't work.. Where am I wrong ? Thanks all :)

$(document).ready(function() {

    $("#rname").attr('maxlength','15');
    $("#rmail").attr('maxlength','50');
    $("#rpass").attr('maxlength','50');


//--------------------------------------------------//  MaxLenght Settings

    $("#rname").keyup(function() {

        var uname = checkUsername();

    });     // Username keyup

//--------------------------------------------------//  Username Checking

    $("#rmail").keyup(function() {

        var umail = checkEmail();

    });     // Email keyup

//--------------------------------------------------//  Email Checking

    $("#passone, #passtwo").keyup(function() {

        var upass = checkPass();

    });     // Email keyup

//--------------------------------------------------//  Password Checking

    $("#rname, #rmail, #passone, #passtwo").keyup(function() {

        var btn = button(uname,umail,upass);

    });     // button show hide

//--------------------------------------------------//  Button

});     //--------------------------------------------------//  Document Ready Ends

function checkUsername() {

    var chars = /^[a-zA-Z0-9\.\_]*$/;

    var username = document.getElementById("rname").value;

    if(chars.test(username) == true) {

        $("#notName").html("").show();

        if ((username.length > 3) && (username.length < 20)) {

            $("#notName").html("").show();

                $.post("check.php", { username: username },
                function(result){

                    if (result == true) {

                        $("#notName").html("").show();
                        return true;

                    }

                    else {

                        $("#notName").html("Username is already exists!").show();
                        return false;

                    }

                });

        }

        else {

            $("#notName").html("Username must be between 3 and 20 characters!").show();
            return false;

        }

    }

    else {

        $("#notName").html("Username can contain just A-Z, 0-9, dot and underscore!").show();
        return false;

    }

}

//--------------------------------------------------//  checkUsername Function

function checkEmail() {

    var email = document.getElementById("rmail").value;

    $.post("check.php", { vmail: email },
    function(result){

        if (result == true){

            $.post("check.php", { email: email },
            function(result){

                if (result == true) {

                    $("#notMail").html("").show();
                    return true;

                }

                else {

                    $("#notMail").html("Email is already exists!").show();
                    return false;

                }


            });

        }

        else {

            $("#notMail").html("Please enter a valid Email").show();
            return false;

        }


    });



}

//--------------------------------------------------//  checkEmail Function

function checkPass() {

    var passOne = document.getElementById("passone").value;
    var passTwo = document.getElementById("passtwo").value;

    if (passOne == passTwo) {

        $("#notPass").html("").show();
        return true;

    }

    else {

        $("#notPass").html("Passwords do not match!").show();
        return false;

    }

}

//--------------------------------------------------//  checkPass Function

function button(a,b,c) {

    if (a == true && b == true && c == true) {

        document.getElementById("button").style.display = "block";

    }

    else {

        document.getElementById("button").style.display = "none";

    }

}

Answer 1

The main problem is that you didn't understand correctly how to use asynchronous function. You are using asynchronous functions as synchronous. This question can be of help to you.

jQuery Ajax POST example with PHP

Yet, just to try to keep you going and learn step-by-step, if you say that the only thing that isn't working is button function, it's possible that your code can work. Try using global variables instead of local, like this:

    $("#rname").keyup(function() {

        uname = checkUsername(); // var removed

    });     // Username keyup

//--------------------------------------------------//  Username Checking

    $("#rmail").keyup(function() {

        umail = checkEmail();

    });     // Email keyup // var removed

//--------------------------------------------------//  Email Checking

    $("#passone, #passtwo").keyup(function() {

        upass = checkPass(); // var removed

    });     // Email keyup that the variables can be read from all functions in the call to button()

About synchronous and asynchronous programming

Synchronous and asynchronous are relatively simple concepts.

Synchronous is the "normal" type of programming: one thing after the other. You call a function, it returns then the process goes on etc.

Asynchronous is when you call something (a server, web service, etc) and associate a function to that something that will be called when it finishes and you don't have control when that happens. So you don't have control of what comes first. Let's say you did 2 ajax calls and assigned to them two different functions. You can't be sure what function will run first. But nothing stops you from doing things like what you did before: create a wait loop that runs when these variables are set to true and make the functions update certain variables to exit the wait loop. You just have to consider that this return may never happen. There can be an error on the server and the ajax calls simply don't return or return an error. So you have to consider not to do an infinite loop in this case. Set an error function that set another variable to interrupt the cicle or something. Or make, say a time interval that if expired the loop is interrupted.

I hope this may have explained a bit the concepts to you.