剣道UIカスタム検証がテンプレートとビューモデルで動作しない

Question

私はビューモデルにバインドされたフォームテンプレートを持っています。すべての文字列（ラベルと検証メッセージ）は、ビューモデルで設定されます。

フォームフィールドにもバリデーションがあり、これまでのところ単純なバリデーションがうまくいきます。しかし、カスタム検証ルールも追加したいと考えています。問題は、validateメソッドが呼び出されたときに、カスタム検証ルールがヒットしないことです。ここで

はコードです：ここでは

<div data-template="div-template" data-bind="source: this" id="mytemplate"> 
    <script id="div-template" type="text/x-kendo-template"> 
     <div class="demo-section k-content"> 
      <div> 
       <form id="ui_test_form" data-role="validator" novalidate="novalidate"> 

        <div class="form-group"> 
         <label id="lbl_salary" class="label-caption">#=strings.salary#</label> 
         <input id="salary" name="Salary" type="number" value="" min="1" data-type="number" required validationMessage="#=strings.salaryRequired#" style="margin-right: 35px; "/> 
         <span data-for='salary' class='k-invalid-msg'></span> 
        </div> 

        <div class="form-group"> 
         <label id="lbl_startdate" class="label-caption">#=strings.startDate#</label> 
         <input type="text" id="StartDate" data-role='datepicker' name="StartDate" data-type="date" required validationMessage="#=strings.startDateRequired#" /> 
         <span data-for='StartDate' class='k-invalid-msg'></span> 
        </div> 

        <div class="form-group"> 
         <label id="lbl_enddate" class="label-caption">#=strings.endDate#</label> 
         <input type="text" id="EndDate" data-role='datepicker' name="EndDate" data-type="date" required validationMessage="#=strings.endDateRequired#" data-enddate-msg="End date should be after start date" /> 
         <span data-for='EndDate' class='k-invalid-msg'></span> 
        </div> 

        <div class="form-group row"> 
         <label class="label-caption"></label> 
         <button class="k-button col-md-6" type="button" value="Submit" data-bind="click: save">#=strings.validate#</button> 
        </div> 

       </form> 
      </div> 
     </div> 
    </script> 
</div> 
<script> 
    $(function() { 

    var strings = { 
     salary: "Salary", 
     startDate: "Start Date", 
     endDate: "End Date", 
     endDateInvalid: " End Date should be after start date", 
     salaryRequired: " Salary is required", 
     startDateRequired: " Start Date is required", 
     endDateRequired: " End Date is required", 
     validate: "Validate" 
    }; 

    var formViewModel = kendo.observable({ 
    strings: strings, 
    save: function(){ 

     var validator = $("#ui_test_form").kendoValidator().data("kendoValidator"); 
     if(validator.validate()){ 
     debugger; 
     }else{ 
     debugger; 
     } 

    } 
    }); 

    kendo.bind($("#mytemplate"), formViewModel); 

    function initializeComponents(){ 
    $("#salary").kendoNumericTextBox({ format: 'c' }); 

    var container = $("#mytemplate"); 
    container.kendoValidator({ 
     rules: { 
     greaterdate: function (input) { 
      //I want to compare start and end date here, this function never gets called 
      debugger; 
     } 
     } 
    }); 
    } 

    initializeComponents(); 
}); 
</script> 

は、この上のDojo

任意の考え/提案における実施例でありますか？

Answer 1

ヒットしています。これをDojoで実行しているときに、Chrome上のF12開発ツールが開いていますか？デバッガが起動するためには、デバッガが開いている必要があります。また、入力を変更して入力の外側をクリックする必要があり、それがヒットすることを保証します。試してみてくださいDojo