ASP.Net MVCの控えめなjQuery validateプラグインの内部作業

これは、ASP.Net MVCシリーズの控えめな検証の理解のパート3です。



1.内部jQuery検証プラグインの動作

2. ASP.Net MVCの控えめな検証によって生成されたHTMLコードを理解する

3. ASP.Net MVCの控えめなjQuery validateプラグインの内部作業。



この記事で説明する内容：

• 解析方法
  
  
  • セクション「parceElement」
    
    
    • skipAttachの説明
    • parceElement関数の説明
    
    
    
  • セクション「validateInfo」
    
    
    • 関数「validateInfo」の説明
    • 戻りオブジェクトの説明
    
    
    
  
  
  
• アダプター

解析方法

ドキュメントがロードされるときに発生する控えめな検証サイクルについて説明し、各コンポーネントの役割を理解します。

jquery.validate.unobtrusive.jsの最後を見ると、

$(function () { $jQval.unobtrusive.parse(document); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、「parse（）」メソッドを呼び出して「document」を渡します

parse（）メソッドとは何ですか？

 { parse: function (selector) { /// <summary> /// Parses all the HTML elements in the specified selector. It looks for input elements decorated /// with the [data-val=true] attribute value and enables validation according to the data-val-* /// attribute values. /// </summary> ///Any valid jQuery selector. $(selector).find(":input[data-val=true]").each(function () { $jQval.unobtrusive.parseElement(this, true); }); var $forms = $(selector) .parents("form") .andSelf() .add($(selector).find("form")) .filter("form"); $forms.each(function () { var info = validationInfo(this); if (info) { info.attachValidation(); } }); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

parse（）メソッドには2つのセクションがあります

1.セクション「parceElement」

parseElement（要素、skipAttach）

 $(selector).find(":input[data-val=true]").each(function () { $jQval.unobtrusive.parseElement(this, true); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初に発生するのは、渡すセレクタ内で「data-val = true」を含むすべての要素をループすることです（この場合、これは「document」です）

次に、「parseElement（）」を呼び出して、検証する要素と「skipAttach」の「true」を渡します。

skipAttachパラメーターの説明

「skipAttach」でtrueではなくfalseを渡す理由が疑問になる場合があります。



「SkipAttach」は、フォームでvalidate（）を呼び出すためのフラグです。

「false」を渡すと、検証ルールが渡す要素にアタッチされ、ルールの配列に対して「validate」メソッドがすぐに呼び出され、控えめな検証に必要な他のオプションが渡されます（他の要素がある場合parsit）。

これは望ましくありません。 まず、フォームの各要素にルールを添付し、すべてのルールが添付されたら、「parse」メソッドの2番目の部分にある「validate（）」を呼び出します。



どのような場合に「true」を「skipAttach」に渡す必要がありますか？



既に検証済みのフォームに動的要素を追加する場合は、フォームが再度検証されないように「true」を渡します。何も起こらないようにするためです（動的要素の検証については次の記事で説明します）

ParseElementの説明

基本的に、parseElement（）関数は2つのことを行います。



1.フォーム要素が初めて呼び出されたとき（このフォームでは以前に要素が呼び出されていません）、関数は「validate（）」メソッドに渡されるオプションのオブジェクトを作成します。 オプションは、jquery.unobtrusiveによって、別個の関数「errorPlacement」、別個の「errorClass」、およびルールの空の配列として使用されます。

注：これらはすべて、「parseElement」なしで呼び出されるプライベートメソッド「validationInfo（form）」で実行できます。1回以上呼び出されると、同じオブジェクトを返すだけです。 したがって、データ/関数を追加、変更、または呼び出すことができます。

2.各要素について、「parseElement」を呼び出すと、アダプタを使用してこの要素（「data- *」）に記述されたルールを理解し（アダプタの機能を説明する項目があります）、翻訳および追加しますそれらを最初の呼び出しで作成されたルールの配列に追加します。

注：parseElementにアクセスするたびに、その結​​果は$ .data（「unobtrusiveValidation」）メソッドを使用してフォームに保存されます。 したがって、個々の呼び出しは同じデータソースと同期されます。

2.セクション「validateInfo」

 var $forms = $(selector) .parents("form") .andSelf() .add($(selector).find("form")) .filter("form"); $forms.each(function () { var info = validationInfo(this); if (info) { info.attachValidation(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

関数「validateInfo」の説明

「validateInfo（）」関数の呼び出しは、「validate（）」メソッドのオプションオブジェクトを構築することをすでに述べました。 オプションは、jquery.unobtrusiveによって、個別の関数「errorPlacement」、個別の「errorClass」、およびルールの空の配列として使用されます。

ここでは、ページ上の各フォームに対して「validateInfo（）」も呼び出します。 通常、この場所で「valaidateInfo」を呼び出すと、オブジェクトは最初のフェーズですでに入力されているフォームに保存されます。 つまり、ゲッターとして使用します。

次に、「attachValidation（）」を呼び出します。これは「validate（）」メソッドを呼び出し、「validationInfo（）」呼び出しで設定されたオプションを渡します。

 data_validation = "unobtrusiveValidation"; function validationInfo(form) { var $form = $(form), result = $form.data(data_validation), onResetProxy = $.proxy(onReset, form); if (!result) { result = { options: { // options structure passed to jQuery Validate's validate() method errorClass: "input-validation-error", errorElement: "span", errorPlacement: $.proxy(onError, form), invalidHandler: $.proxy(onErrors, form), messages: {}, rules: {}, success: $.proxy(onSuccess, form) }, attachValidation: function () { $form .unbind("reset." + data_validation, onResetProxy) .bind("reset." + data_validation, onResetProxy) .validate(this.options); }, validate: function () { // a validation function that is called by unobtrusive Ajax $form.validate(); return $form.valid(); } }; $form.data(data_validation, result); } return result; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、$ form.data（“ unobtrusiveValidation”）を使用する前に、フォームでこの関数を既に呼び出しているかどうかを確認します。 すでに呼び出している場合は、何もせずに結果を返します。

戻りオブジェクトの説明。

これが「validationInfo（）」関数の最初の呼び出しである場合、結果オブジェクトを作成し、$ .data（）メソッドを使用してフォームに保存します。 このオブジェクトには3つの部分が含まれます。

• 後で構築するルールとメッセージの空の配列を使用して「validate（）」メソッドに渡すオブジェクト。
• attachValidation（）メソッドは、独自のreset.unobtrusiveValidationイベントをフォームにアタッチし、すべてのオプションを使用してメソッドでvalidateを呼び出した後、ルールとメッセージの配列がいっぱいになると、このメソッドが呼び出されます（独自のリセットイベントをトリガーします） 「、我々は「onReset（）」メソッドを呼び出し、すべてをリセットします）。
  
  

   function onReset(event) { // 'this' is the form element var $form = $(this); $form.data("validator").resetForm(); $form.find(".control-group").removeClass("error"); $form.find(".validation-summary-errors") .addClass("validation-summary-valid") .removeClass("validation-summary-errors"); $form.find(".field-validation-error") .addClass("field-validation-valid") .removeClass("field-validation-error") .removeData("unobtrusiveContainer") .find(">*") // If we were using valmsg-replace, get the underlying error .removeData("unobtrusiveContainer");
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  そのため、フォーム検証を無効にするためにリセットイベントをトリガーする場合：
  
  $('form').trigger('reset.unobtrusiveValidation')
  
  
  
  
  
  
• 控えめなAjaxから別の「validate（）」メソッドが呼び出されます

アダプター

「parseElement（）」メソッドについて説明したとき、アダプターのトピックを特にスキップしました。これは、アダプターがサブアイテムを強調表示できるほど複雑だからです。

控えめな検証を使用してHtmlを生成する方法、および通常のjquery.validateに個々の検証属性を追加する方法を調べました。 アダプターは、2つの部分を接続するために使用されます。

それでは、アダプターは何を担当していますか？

アダプタは、Htmlの「data- *」を通常のjquery.validateプラグインが理解できる形式に変換する役割を果たします。 ユーザーが控えめな検証を使用して別の検証メソッドを追加する場合は、そのためのアダプターも作成する必要があります。 アダプタコレクションは、$ .validator.unobtrusive.adaptersにあります。 アダプタコレクションは、jquery.unobstrusiveで定義されているすべてのデフォルトアダプタと、ユーザーが定義したアダプタで構成されています。

また、独自のアダプターを追加するための4つのメソッドが含まれています。これについては後で説明します。







最も基本的な方法：

jQuery.validator.unobtrusive.adapters.add（adapterName、[params]、fn）



このメソッドは$ .ajaxメソッドと見なすことができ、他の3つの補助メソッドはこのメソッドを使用します。



パラメーターを分析しましょう。

• adapterName：これはアダプターの名前です。Html要素の「ruleName」と一致します（data-val-ruleName）
• [params]：検証メソッドが検証を完了するために使用するパラメーターのオプションの配列。
• fn：Html "data- *"を "validate（）"メソッドで使用されるルールとメッセージに接続するために呼び出されます。 次のプロパティを持つオブジェクトとして渡されるパラメーターのオプションがあります。
  
  
  • element：検証されるHTML要素。
  • form：フォーム要素。
  • message：この要素の「data- *」属性から抽出された、このルールのエラーメッセージ。
  • params：検証に使用されるパラメーターと、Html要素の "data- *"属性から抽出された配列（data-val-ruleName-param1）。
  • ルール：この要素のjQueryルールの配列。 この配列にルールを追加するには、キーと値のペアを渡します。キーは検証ルールの名前、値はこのルールに使用されるパラメーターです（「独自の検証ルールの追加」セクションのサイクルの最初の記事に記載されています）
  • messages：この要素のjqueryメッセージ配列、およびルールオブジェクトと共に、それを埋め、「検証」メソッドでこのHtml要素のメッセージオブジェクトとして使用します。
    
    注：このメソッドは結果を返しません。 ルールとメッセージの配列は、$ .data（「unobtrusiveValidation」）を使用してフォーム自体に保存されます。 「parseElement」メソッドをチェックして、パラメーターがアダプター関数にどのように渡されたかを詳細に確認できます。
  
  
  

例：

HTML

 <input id="val" type="text" name="val" data-val="true" data-val-between="Must be in the right range" data-val-between-min="5" data-val-between-max="30" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Javascript

 //The adapter jQuery.validator.unobtrusive.adapters.add( 'between', ['min' ,'max'], function (options) { options.rules['between'] = { min: options.params.min, max: options.params.max }; options.messages['between'] = options.message; } ); //The validation method jQuery.validator.addMethod("between", function (value, element, params) { params.min == 5; //true params.max == 30; //true });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

他のアダプターはどうですか：



addBool

addSingleVal

addMinMax



前述のadd（）メソッドを使用して独自のアダプターを追加するという概念を理解している場合、これらは非常に簡単です。

Brad Wilsonの記事「ASP.NET MVC 3の控えめなクライアント検証」も参照できます。この記事では、アダプターのトピックについて詳しく説明しています。



Nadeem Khedr 控えめなjQuery検証プラグインがAsp.net MVC翻訳で内部的に動作する方法



更新：アダプターのリストとシリーズの他の投稿へのリンクを含む画像を追加しました