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>