Ajax in custom handler on client side

Question

Im making custom formular and for one field I need a username ajax validation.

I prepared a custom handler in jQuery:

document.formvalidator.setHandler('usernamecheck', function(value) {
    jQuery(".username_message").html('');
    jQuery(".username_message").hide();

    jQuery.ajax({
        url:'index.php?option=com_xxx&task=user.checkUserName',
        type: "POST",
        data: {
            'username': value
        }
    }).done(function(msg) {
        console.log(msg);
        msg = JSON.parse(msg);

        if (msg.msg==='false')
        {
            jQuery(".username_message").show();
            jQuery(".username_message").html(msg.html);
            return false;                
        }
        else
        {
            return true;    
        }

    })
});

Ajax works fine but while form validation this handler always add invalid class to my field.

Even if all method returns true, after validation I have red bordered input. But when I remove ajax calling from this method and for testing check only by if-else, it works ok.

Anyone knows why? Maybe it can't be done by ajax in handlers?

Answer 1

I managed to run this validation by small work around. I moved ajax request to input blur method and in form validation hendler I just check some variables which was set after ajax request:

jQuery(document).ready(function() {

    jQuery("#jform_email").blur(function(){
        email = jQuery("#" + this.id).val();
        jQuery(".email_message").html('');
        jQuery(".email_message").hide();
        jQuery("#jform_email").removeClass('invalid');
        usermailvalid = true;

        jQuery.ajax({
            url:'index.php?option=com_xxx&task=user.checkUserEmail',
            type: "POST",
            data: {
                'email': email
            }
        }).done(function(msg) {
            console.log(msg);
            msg = JSON.parse(msg);

            if (msg.msg==='false')
            {
                usermailvalid = false;
                jQuery("#jform_email").addClass('invalid');
                jQuery(".email_message").show();
                jQuery(".email_message").html(msg.html);                
            }

        })
    });

    var usermailvalid = true;

    document.formvalidator.setHandler('usermailcheck', function(value) {

        if (usermailvalid==false)
        {
            return false;                
        }
        else
        {
            return true;    
        }

    });
});

Hope it helps someone.