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

好吧，似乎/诀窍，使这项工作是设置的值该消息的数据属性跨越输入标记的名称的属性，而不是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>