jquery驗證顯示加載GIF，而遠程請求

我正在驗證與jQuery驗證插件的形式。我正在檢查給定的用戶名是否已經在使用遠程選項的數據庫中。一切都像預期的那樣工作，但我想在驗證腳本請求服務器時顯示加載gif。有沒有簡單的方法來完成這一點，或者我需要編輯插件js文件？反正，這裏是代表代碼..jquery驗證顯示加載GIF，而遠程請求

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！

來源

2011-09-08 kasper Taeymans

根據http://docs.jquery.com/Plugins/Validation/Methods/remote這個遠程參數是一個完整的jQuery.ajax設置對象。有關實施細節，請參閱http://api.jquery.com/jQuery.ajax。

來源

2011-09-08 12:03:18

謝謝你，我沒有意識到這很簡單！ –

Kasper如果scr4ve幫助了您，請檢查其答案旁邊的複選標記，表明他的答案正確 – Brad

您可以添加一個方法，象下面這樣：

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

來源

2012-05-05 06:28:42 Riant

此方法使升級到遠程選項無法獲益。 – getWeberForStackExchange

$（文件）。就緒（函數（）{

$（文件）.ajaxComplete（功能（事件，請求，設置）{loading_hide（）;}）;

功能loading_s how（）{$（'＃modelLoad'）。removeClass（'hide'）; }

function loading_hide（）{$（'＃modelLoad'）。addClass（'hide'）; （{＃FrmUser）。validate（{rules：{username：{required：true}，email：{required：true，email：true，remote：{url：'../emailavailable'，}，}}。鍵入：「post」，data：{username：function（）{return $（「＃username」）.val（）;}} // if if is required}，beforeSend：function（xhr）{loading_show（）;} }}，消息：{電子郵件：{遠程：「電子郵件地址已在使用」}}}）; //結束驗證

}）; //結束DOM

來源

2016-06-16 08:34:35

jquery驗證顯示加載GIF，而遠程請求

回答

相關問題