JQueryの検証プラグイン - サーバーからカスタム動的メッセージを設定する

Question

htmlページのサーバー側からカスタムエラーメッセージをキャッチして表示する方法は？

function getAlertMessage() { 
    $.ajax({ 
     type : "POST", 
     url : "getAlert.do", 
     success : function(data) { 
      data.alertmsg //How to set this msg to validatename property in messages Attribute 
     }, 
     error : function() { 
      alert("No Court No details found"); 
     } 
    }); 
} 

---

$(document).ready(function() { 
    $("#register-form").validate({ 
     rules : { 
     username : { 
      required : true, 
      validname : true, 
      minlength : 4 
     } 
     }, 
     messages : { 
     username : { 
     required : "Please Enter UserName", 
     validname : getAlertMessage(), //it does not worked here 
     minlength : "UserName is Too Short"}}, 
     errorPlacement : function(error,element) { 
      $(element).closest('.form-group').find('.help-block').html(
error.html()); 
}, 
     highlight : function(element) { 
     $(element).closest('.form-group') 
     .removeClass('has-success') 
     .addClass('has-error'); 
      }, 
     unhighlight : function(element, 
     errorClass, validClass) { 
     $(element).closest('.form-group') 
     .removeClass('has-error') 
     .addClass('has-success'); 
     $(element).closest('.form-group') 
     .find('.help-block').html('');}, 
      submitHandler : function(form) { 
      form.submit();}});}); 

Answer 1

remote方法がすでに存在しているのに、なぜあなたはこのを行う必要があるでしょうか？

これは、usernameフィールドを検証するためのサーバー呼び出しのように見えるので、この目的のために設計されたメソッドを使用します。サーバーから、true,false、または動的カスタム検証メッセージを表すJSONエンコードされた文字列を送り返します。

remoteによって検証されているフィールドの値は既にデフォルトで送信されているため、urlとtypeのパラメータを定義する必要があります。あなたはrulesとmessages内で定義する必要があると思いますすべてです

$(document).ready(function() { 
    $("#register-form").validate({ 
     rules: { 
      username: { 
       required: true, 
       minlength: 4, 
       remote: { 
        url: 'getAlert.do', 
        type: 'POST' 
       } 
      } 
     }, 
     messages: { 
      username: { 
       required: "Please Enter UserName", 
       minlength: "UserName is Too Short" 
       // DO NOT NEED 'remote' message since it's already coming from server 
      } 
     }, ..... 

。 usernameの値は、サーバー上のgetAlert.do機能に送信されます。

getAlert.doは、検証を通過させる場合はtrue、検証を失敗させる場合はエラーメッセージを表すJSONエンコード文字列を返す必要があります。

参照：jqueryvalidation.org/remote-method/

Answer 2

私はこの種の問題に取り組んできましたし、最終的にそれが働いてしまいました。オンライン上には何も似ていませんが、質問に直接関係するので、これを置くのに良い場所のように感じます。

私が必要としたのは、チェックを行い、データベース（cmsのようなビット）のチェックに基づいて返されるエラーメッセージを決定するサーバー側の機能でした。このメッセージは、ユーザに表示され、それに応じてフィールドを検証する必要がありました。

これは最高の/クリーンな方法ではないかもしれませんが、動作し、私はそれが悪いとは思わない！基本的には、エラーメッセージを格納するためにページに隠しフィールドが必要です。だからここに私はそれが動作するようになった方法は次のとおりです。

jQuery.validator.unobtrusive.adapters.add("customValidation", [], function (options) { 
    options.rules["remote"] = { 
     url: "/api/CustomValidation", 
     type: "post", 
     data: { 
      fieldValue: function() { return options.element.value; } 
     }, 
     beforeSend : function() { 
      // Show loading gif 
      $('#loader').show(); 
     }, 
     dataFilter: function (data) { 
      // if the API returns a JSON string then this is needed 
      var result = JSON.parse(data); 

      if (result != undefined && result != null) { 
       if (result.ErrorMessage != null) { 
        // update a hidden field on the page with the message. 
        $('#HdnValidationMessage').val(result.ErrorMessage); 

        // Field is not valid so return false 
        return false; 
       } 
       else { 
        // no error message returned so field must be valid 
        return true; 
       } 
      } 
      else { 
       // Something has gone wrong! I won't let this stop the user. 
       return true; 
      } 
     }, 
     complete: function() { 
      // hide loading gif 
      $('#loader').hide(); 
     } 
    }; 

    // Default error message set to fetch the error fromt he hidden field. 
    options.messages["remote"] = function() { return $('#HdnValidationMessage').val(); } 
}); 

が、それは私がしたように、この上でしばらく立ち往生して誰かを役に立てば幸い！

UPDATE：

隠しフィールドなしで、この作業を手に入れました。なぜ私は前にできなかったのか分かりませんが、今はずっと簡単です。

これで、コントローラーのアクションサーバー側は有効な場合はtrueを返し、正しくない場合はエラーメッセージを返します。以下のエラーメッセージが表示されます。あなたは `成功ハンドラ内validate`を呼び出すか、あなたは` $アクセスすることで、成功のハンドラに設定すること（「＃-フォームを登録する」）ことに変更

jQuery.validator.unobtrusive.adapters.add("customValidation", [], function (options) { 
    options.rules["remote"] = { 
     url: "/api/CustomValidation", 
     type: "post", 
     data: { 
      fieldValue: function() { return options.element.value; } 
     }, 
     beforeSend : function() { 
      // Show loading gif 
      $('#loader').show(); 
      $(options.element).prop("readonly", "readonly"); 
     }, 
     complete: function() { 
      // hide loading gif 
      $('#loader').hide(); 
      $(options.element).removeProp("readonly"); 
     } 
    }; 
});