敲除驗證自定義消息模板的問題

我還沒有使用Knockout驗證，我試圖感受一下它可以做些什麼。敲除驗證自定義消息模板的問題

我想弄清楚是否有可能顯示一個圖標，而不是錯誤消息在輸入標記的右側出現錯誤。而且，如果用戶將鼠標懸停在圖標上，則會顯示錯誤消息。

有沒有人做過這個或有一個如何做到這一點的想法？

謝謝。

編輯：

說我在我的視圖模型以下（什麼我試圖做更詳細的例子）：

var firstName = ko.observable().extend({required: true});

我的HTML：

<input data-bind="value: firstName" />

我的理解是，如果名字文本框留空，那麼（默認情況下）會在文本框右側顯示一些文本，指出該字段是必需的。

我試圖瞭解是如何改變右邊顯示錯誤文本上，當鼠標懸停，會彈出錯誤信息正確顯示圖標的默認行爲。

所以，一開始會是這樣的：

<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">  
    <input data-bind="value: firstName" /> 
    <input data-bind="value: lastName" /> //also required 
</div> 
<div id='myCustomTemplate'> 
    //This icon should only display when there is an error 
    <span class="ui-icon ui-icon-alert" style="display: inline-block"/> 

    //css/javascript would display this when user hovers over the above icon 
    <span data-bind="validationMessage: field" /> 
</div>

我不知道如果我正確使用messageTemplate功能。我也不知道該如何將文本綁定到customTemplate中，以便爲每個錯誤顯示正確的錯誤消息。 IOW，名字和姓氏可能有自定義錯誤消息。如果他們都使用相同的模板，模板如何容納自定義錯誤消息？

我希望這是有道理的。

來源

2013-01-03 RHarris

一些代碼將有助於解決方案以適應您的需求，但得到的答覆是肯定的。 Knockout允許您使用可用於覆蓋默認錯誤文本（https://github.com/ericmbarnard/Knockout-Validation/wiki/Validation-Bindings）的validationMessage屬性設置自定義div或span標籤。除此之外，您可以爲您的觀察對象設置一個自定義驗證器功能，如果發現錯誤，它可以激活/停用工具提示。如果您可以向我們展示一些示例代碼（最好是在小提琴中），我們可以幫助您進行所需的更改，使其按您想要的方式工作。 – 2013-01-07 22:39:10

感謝您的回覆，感謝您的延遲......幾個假期。我添加了一個編輯，以更全面地解釋我所追求的。 – RHarris

可以顯示圖標並在懸停時顯示錯誤消息。

在一個項目中，我們正在做類似的事情。我們顯示帶有錯誤編號的徽章，但我們使用decorateElement突出顯示字段和錯誤AsTitleOnModified以顯示懸停在輸入上時的錯誤。

要創建錯誤消息模板，您應該將模板包裝在腳本標記中。它的工作方式與ko template binding的模板類似。

在模板內部，您可以通過引用'field'來訪問已驗證的observable。錯誤消息存儲在您的observable的屬性「錯誤」中。

<script type="text/html" id="myCustomTemplate"> 
    <span data-bind="if: field.isModified() && !field.isValid(), 
        attr: { title: field.error }">X</span> 
</script>

我創建了一個小提琴以行動表達這一點：http://jsfiddle.net/nuDJ3/180/

來源

2013-01-25 14:03:11 delixfe

謝謝！這正是我想要完成的！ – RHarris

其實，現在我玩這個更多一點，我看到它沒有像我期望的那樣工作。首先，X（徽章）永遠不會消失。其次，檢查這個小提琴http://jsfiddle.net/nuDJ3/5/並注意清除一個字段不會觸發錯誤消息。我錯過了什麼嗎？ – RHarris

哦，我很抱歉。我錯過了隱藏信息，如果它有效或未修改。敲除驗證插入跨度一次，然後你必須使用普通綁定。我更新了答案並創建了[fiddle]的新版本（http://jsfiddle.net/nuDJ3/6/）。訣竅是將「if：field.isModified（）&&！field.isValid（）」插入到跨度的綁定中。 – delixfe

敲除驗證自定義消息模板的問題

回答

相關問題