jquery validationリモートでのリクエスト中にGIFを読み込んで表示する

Question

jqueryバリデーションプラグインでフォームを検証しています。私は、指定されたユーザー名がすでにリモートオプションでdbに入っているかどうか確認しています。すべて正常に動作しますが、検証スクリプトがサーバーを要求している間に読み込み用のGIFを表示します。これを達成する簡単な方法はありますか、またはプラグインjsファイルを編集する必要はありますか？とにかく、ここでは代表的なコードは、したがって、基本的に、私はreadyStateの2

中に感謝任意のヘルプをAJAXローディング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"}} 
    }} 

です！

Answer 1

http://docs.jquery.com/Plugins/Validation/Methods/remoteによれば、リモートパラメータは完全なjQuery.ajax設定オブジェクトです。実装の詳細については、http://api.jquery.com/jQuery.ajaxを参照してください。

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

Answer 3

$（ドキュメント）.ready（関数（）{

$（文書）.ajaxComplete（関数（イベント、要求、設定）{loading_hide（）;}）;

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

function loading_hide（）{$（ '＃modelLoad'）。addClass（ 'hide'）; }：

$（ "＃FrmUser"）validate（{ルール：{ユーザー名：{必須：true}、email：{必須：true、email：true、remote：{url： '../emailavailable' };}} //必要な場合は、beforeSend：function（xhr）{loading_show（）;}これは、 }}、メッセージ：{メール：{リモート： "メールアドレスは既に使用されている"}}}）; //最後の検証

}）; //エンドDOM