jquery validation displaying loading GIF while remote requesting

I'm validating a form with the jquery validation plugin. I'm checking if a given username is already in db with the remote option. everything works like expected but I want to show a loading gif while the validation script is requesting the server. Is there an easy way to accompli开发者_如何学Pythonsh this or do I need to edit the plugin js file? anyways, here is the representative code..

 rules: {
   user_name: {
       alfanum:true,//custom method to check if alphanumeric
       required: true,
       minlength: 5,
       remote: {url: "checkuser_custom.php",type:"GET",data:{cmd:"check"}}
   }}

So basically I want to display an ajax loading gif during readystate 2

any help appreciated!

According to http://docs.jquery.com/Plugins/Validation/Methods/remote the remote param is a full jQuery.ajax settings object. See http://api.jquery.com/jQuery.ajax for implementation details.

You can add a method like below:

$.validator.addMethod("fullRemote", function(value, element, params) {      
    if ( this.optional(element) )
            return "dependency-mismatch";

        var previous = this.previousValue(element);
        if (!this.settings.messages[element.name] )
            this.settings.messages[element.name] = {};
        previous.originalMessage = this.settings.messages[element.name].remote;
        this.settings.messages[element.name].remote = previous.message;

        if( params.onStart ) params.onStart(element);

        params = typeof params == "string" && {url:params} || params;

        if ( this.pending[element.name] ) {
            return "pending";
        }
        if ( previous.old === value ) {
            return previous.valid;
        }

        previous.old = value;
        var validator = this;
        this.startRequest(element);
        var data = {};
        data[element.name] = value;
        $.ajax($.extend(true, {
            url: params,
            mode: "abort",
            port: "validate" + element.name,
            dataType: "json",
            data: data,
            success: function(response) {
                validator.settings.messages[element.name].remote = previous.originalMessage;
                var valid = response === true;
                if( params.onFinish ) params.onFinish(element, valid);
                if ( valid ) {
                    var submitted = validator.formSubmitted;
                    validator.prepareElement(element);
                    validator.formSubmitted = submitted;
                    validator.successList.push(element);
                    validator.showErrors();
                } else {
                    var errors = {};
                    var message = response || validator.defaultMessage( element, "remote" );
                    errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
                    validator.showErrors(errors);
                }
                previous.valid = valid;
                validator.stopRequest(element, valid);
            }
        }, params));
        return "pending";
}, "The value you entered is already in use.");

Then use it almost same as "remote", like below:

    ...
    rules: {
        email: {
            required: true,
            email: true,
            fullRemote: {
                url: "../emailavailable",
                type: "post",
                onStart: function(e){
                        var loading = $('#ajaxLoading');
                        loading.appendTo($(e).parent());
                        alert($(e).val());
                    },
                onFinish: function(e, valid){
                        var loading = $('#ajaxLoading');
                        loading.remove();
                        return true;
                    }
            }
        }
    },
    messages: {
        email: {
            fullRemote: "email address is already in use."
        }
    },
    ...

$(document).ready(function() {

    $(document).ajaxComplete(function(event, request, settings) { loading_hide(); });

    function loading_show() { $('#modelLoad').removeClass('hide'); }

    function loading_hide() { $('#modelLoad').addClass('hide'); }

    $("#FrmUser").validate({
        rules: {
            username: { required: true },
            email: {
                required: true, email: true,
                remote: {
                    url: '../emailavailable',
                    type: "post",
                    data: {
                        username: function() {
                            return $("#username").val();
                        }
                    } //if it is required 
                },
                beforeSend: function(xhr) {
                    loading_show();
                }
            }
        }, messages: { email: { remote: "email address is already in use." } }
    });//end validation

});//end dom