JQuery проверки отображения загрузки GIF при удаленном запросе

Question

Я проверяю форму с помощью плагина проверки jquery.Я проверяю, есть ли заданное имя пользователя в db с опцией remote.все работает, как и ожидалось, но я хочу показать gif загрузки, пока скрипт проверки запрашивает сервер.Есть ли простой способ сделать это или мне нужно отредактировать файл js плагина?В любом случае, вот типичный код ..

 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"}}
   }}

Так что в основном я хочу отображать gif загрузки ajax во время готовности 2

любая помощь приветствуется!

Answer 1

Вы можете добавить метод, как показано ниже:

$.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.");

Затем используйте его почти так же, как «remote», как показано ниже:

    ...
    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."
        }
    },
    ...

Answer 2

Согласно http://docs.jquery.com/Plugins/Validation/Methods/remote удаленный параметр является полным объектом настроек jQuery.ajax. См. http://api.jquery.com/jQuery.ajax для деталей реализации.

Answer 3

$(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