远程请求时显示加载 GIF 的 jquery 验证答案

【问题标题】：jquery validation displaying loading GIF while remote requesting远程请求时显示加载 GIF 的 jquery 验证
【发布时间】：2011-09-08 11:56:57
【问题描述】：

我正在使用 jquery 验证插件验证表单。我正在使用远程选项检查给定的用户名是否已经在 db 中。一切都按预期工作，但我想在验证脚本请求服务器时显示加载 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"}}
   }}

所以基本上我想在readystate 2期间显示一个ajax加载gif

任何帮助表示赞赏！

【问题讨论】：

标签： jquery ajax jquery-validate

【解决方案1】：

根据http://docs.jquery.com/Plugins/Validation/Methods/remote，远程参数是一个完整的jQuery.ajax 设置对象。实现细节见http://api.jquery.com/jQuery.ajax。

【讨论】：

Kasper 如果 scr4ve 帮助了你，请检查他的答案旁边的复选标记，表明他有正确的答案
我们可以在实现示例中进行编辑吗？照原样，此答案仅链接到外部来源，可以通过添加 sn-p 来改进。

【解决方案2】：

您可以添加如下方法：

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

然后使用它几乎与“远程”相同，如下所示：

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

【讨论】：

这种方法无法从远程选项升级中受益。

【解决方案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

【讨论】：