Help calling PHP from a javascript if statement

Question

Here is the javascript:

function checkusername()
                {
                        var username = $("#username").val();
                        $.post("usernamecheck.php", {'username':username},
                                function (data){
                                        if(data == 'taken'){
                                                alert('taken');
                                                return false;
                                        }else{  
                                                alert('available');
                                                return true;
                                        }
                                }
                        );
                }

/**
 * @author GeekTantra
 * @date 20 September 2009
 */
(function(jQuery){
    var ValidationErrors = new Array();
    jQuery.fn.validate = function(options){
        options = jQuery.extend({
            expression: "return true;",
            message: "",
            error_class: "ValidationErrors",
            error_field_class: "ErrorField",
        success_field_class: "SuccessField",
            live: true
        }, options);
        var SelfID = jQuery(this).attr("id");
        var unix_time = new Date();
        unix_time = parseInt(unix_time.getTime() / 1000);
        if (!jQuery(this).parents('form:first').attr("id")) {
            jQuery(this).parents('form:first').attr("id", "Form_" + unix_time);
        }
        var FormID = jQuery(this).parents('form:first').attr("id");
        if (!((typeof(ValidationErrors[FormID]) == 'object') && (ValidationErrors[FormID] instanceof Array))) {
            ValidationErrors[FormID] = new Array();
        }
        if (options['live']) {
            if (jQuery(this).find('input').length > 0) {
                jQuery(this).find('input').bind('blur', function(){
                    if (validate_field("#" + SelfID, options)) {
                        if (options.callback_success) 
                            options.callback_success(this);
                    }
                    else {
                        if (options.callback_failure) 
                            options.callback_failure(this);
                    }
                });
                jQuery(this).find('input').bind('focus keypress click', function(){
                    jQuery("#" + SelfID).next('.' + options['error_class']).remove();
                    jQuery("#" + SelfID).removeClass(options['error_field_class']);
                });
            }
            else {
                jQuery(this).bind('blur', function(){
                    validate_field(this);
                });
                jQuery(this).bind('focus keypress', function(){
                    jQuery(this).next('.' + options['error_class']).fadeOut("fast", function(){
                        jQuery(this).remove();
                    });
                    jQuery(this).removeClass(options['error_field_class']);
                });
            }
        }
        jQuery(this).parents("form").submit(function(){
            if (validate_field('#' + SelfID)) 
                return true;
            else 
                return false;
        });
        function validate_field(id){
            var self = jQuery(id).attr("id");
            var expression = 'function Validate(){' + options['expression'].replace(/VAL/g, 'jQuery(\'#' + self + '\').val()') + '} Validate()';
            var validation_state = eval(expression);
            if (!validation_state) {
                if (jQuery(id).next('.' + options['error_class']).length == 0) {
                    jQuery(id).after('<span class="' + options['error_class'] + '">' + options['message'] + '</span>');
                    jQuery(id).addClass(options['error_field_class']);
     }
                if (ValidationErrors[FormID].join("|").search(id) == -1) 
                    ValidationErrors[FormID].push(id);
                return false;
            }
            else {
                for (var i = 0; i < ValidationErrors[FormID].length; i++) {
                    if (ValidationErrors[FormID][i] == id) 
                        ValidationErrors[FormID].splice(i, 1);
                }
                jQuery(id).addClass(options['success_field_class']);
                return true;
            }
        }
    };
    jQuery.fn.validated = function(callback){
        jQuery(this).each(function(){
            if (this.tagName == "FORM") {
                jQuery(this).submit(function(){
                    if (ValidationErrors[jQuery(this).attr("id")].length == 0) 
                        callback();
        return false;
                });
            }
        });
    };
})(jQuery);

Here is usernamecheck.php:

<?php
    $username = $_POST['username'];
    if($username == 'asdf'){
     echo "taken";
    }else{
     echo "available";
    }

?>

Here is the relevant section of register.php:

 <script type="text/javascript">
                jQuery(function(){

      jQuery("#username").validate({
       expression: "if (VAL.length > 2 && VAL.length < 13 && VAL && checkusername()) return true; else return false;",
       message: "Please enter a valid username between 3 and 12 characters long. If you have that username is taken.",
      });

The actual validation works okay, if I type in asdfg I get a message box saying 'available' and if I type in asdf I get a message box saying 'taken'. However jquery shows the message anyway.

Answer 1

The problem is that checkusername() doesn't actually return true or false. The callback function you add to $.post() does, but this will not be the return value of checkusername(). In fact, checkusername() will return immediately without waiting for the result of your post request, since that's what the callback function is for.

Edit:

A solution would be to show the popup message if validation fails in your callback. A quick google can give you a few examples.