javascript - Kendo UI 自定义验证不适用于模板和 View 模型

Question

我有一个表单模板，它绑定(bind)到 View 模型。所有字符串(标签和验证消息)都在 View 模型中设置。

表单字段也有验证，到目前为止，简单的验证工作正常。但是，我还想添加自定义验证规则。问题是，调用 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