剑道UI-验证程序消息覆盖和空错误数组

Question

我遇到了剑道验证器的问题。设置了三个字段进行验证。在它们之间切换，名字和姓氏字段显示预期的消息，但在切换开始日期字段后，名字和姓氏消息将替换为开始日期消息。然后，在调用validate（）方法时，即使验证失败，错误数组也是空的。此外，如果单击“保存”按钮而不在字段之间切换，则字段的错误根本不会显示。

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

任何能让它正常工作的见解都将不胜感激。

脚本和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>