JavaScript Validation error?

Question

I have been working on a JavaScript validator, but for some reason, evalid always returns as false even if it has passed validation... this is a bug as if evalid is false, the form doesn't submit.

function signup_validate()
    {
        document.getElementById("email_error").innerHTML = "";
        document.getElementById("password_error").innerHTML = "";
        evalid = false;
        pvalid = false;
        email = null;
        pass = null;
        confpass = null;
        email=document.forms["signup_form"]["email"].value.replace(/^\s+|\s+$/g, '');
        atpos=email.indexOf("@");
        dotpos=email.lastIndexOf(".");
        pass=document.forms["signup_form"]["pass"].value;
        confpass=document.forms["signup_form"]["confpass"].value;
            if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
            {
                document.getElementById("email_error").innerHTML = "<span class='required'>Email must be valid.</span>";
            }
            else
            {
                $.post('/resources/forms/signup.php',{email: email}, function(data){
                    if(data.exists){
                        document.getElementById("email_error").innerHTML = "<span class='required'>This email is already in use.</span>";
                    }
                    else
                    {
                        evalid = true;
                    }
                }, 'JSON');
            }
            if (pass!=""&&pass!=null&&confpass!=""&&confpass!=null&&confpass==pass)
            {
                pvalid = true;
            }
            else
            {
                document.getElementById("password_error").innerHTML = "<span class='required'>Both passwords must match and cannot be left blank.</span>";
            }
            alert(evalid);
            if (evalid == true && pvalid == true)
            {
                document.getElementById("signup_form").submit();
            }
            else
            {
                return false;
            }
        }

What could I have missed?

Answer 1

The only moment when you set "evalid" true is inside a function that runs asynchronously. In other words, by the time you set "evalid" true the main function has already reached the end.

You Could try to use $.ajax instead of $.post and use the parameter async:false

Try something like this:

$.ajax({
    type: 'POST',       
    url: '/resources/forms/signup.php',
    data: {email: email},
    success: function(response){
        //your function here
    },
    dataType:'JSON',
    async:false
});