Kendo UI-验证程序消息覆盖并清空错误数组

Question

我遇到了一个Kendo验证器的问题。设置了三个字段进行验证。通过选项卡浏览，名字和姓氏字段显示预期的消息，但通过选项卡浏览起始日期字段后，名字和姓消息将被起始日期消息替换。然后，在调用validate（）方法时，即使验证失败，errors数组也是空的。此外，如果单击"保存"按钮而不在字段之间切换，则根本不会显示字段的错误。

另一件奇怪的事情是，如果删除消息的跨度，所有消息都会显示在名字字段旁边——它们不会显示在相应的输入旁边。

如有任何见解能使其正常工作，我们将不胜感激。

脚本和HTML：

 $(document).ready(function() {
   $("#fn").kendoMaskedTextBox();
   $("#ln").kendoMaskedTextBox();
   $("#from").kendoDatePicker({
     format: "MM/dd/yyyy"
   });
   $("#thru").kendoDatePicker({
     format: "MM/dd/yyyy"
   });
   $("#btnSave").kendoButton({
     icon: "tick",
     click: function() {
       if (!vld.validate())
         alert(vld.errors.length);
     }
   });
   var vld = $("#myForm").kendoValidator().data('kendoValidator');
 })

<div id="myForm">
  <p>
    <label for="fn" class="myLabel">First Name:</label>
    <input id="fn" required validationMessage="{0} Required" />
    <span class="k-invalid-msg" data-for="fn"></span>
  </p>
  <p>
    <label for="ln" class="myLabel">Last Name:</label>
    <input id="ln" required validationMessage="{0} Required" />
    <span class="k-invalid-msg" data-for="ln"></span>
  </p>
  <p>
    <label for="from" class="myLabel">Period:</label>
    <input id="from" required validationMessage="From date is required" />
    <span> - </span>
    <input id="thru" />
    <span class="k-invalid-msg" data-for="from"></span>
  </p>
  <p>
    <label class="myLabel"></label>
    <button id="btnSave" class="btn">Save</button>
  </p>
</div>

jsFiddle链接：http://jsfiddle.net/artrfkmw/1/

Answer 1

好吧，实现这一点的诀窍似乎是将消息跨度的属性的数据值设置为输入标记的name属性，而不是id标记。因此，在上面的例子中，向输入元素添加名称标签是一个快速解决方案：

<div id="myForm">
    <p>
        <label for="fn" class="myLabel">First Name:</label>
        <input id="fn" name="fn" required validationMessage="{0} Required" />
        <span class="k-invalid-msg" data-for="fn"></span>
    </p>
    <p>
        <label for="ln" class="myLabel">Last Name:</label>
        <input id="ln" name="ln" required validationMessage="{0} Required" />
        <span class="k-invalid-msg" data-for="ln"></span>
    </p>
    <p>
        <label for="from" name="from" class="myLabel">Period:</label>
        <input id="from" required validationMessage="From date is required" />
        <span> - </span>
        <input id="thru" />
        <span class="k-invalid-msg" data-for="from"></span>
    </p>
    <p>
        <label class="myLabel"></label>
        <button id="btnSave" class="btn" >Save</button>
    </p>
</div>