Problemi con il modello di messaggio personalizzato di convalida ad eliminazione diretta

Question

Non ho usato la convalida del knockout e sto cercando di capire cosa si può fare con esso.

Sto cercando di capire se è possibile visualizzare un'icona anziché un messaggio di errore a destra di un tag di input quando si verifica un errore. E, se l'utente passa sopra l'icona, viene visualizzato il messaggio di errore.

Qualcuno ha fatto questo o ha un'idea di come realizzare questo?

Grazie.

EDIT: (esempio più dettagliato di quello che sto cercando di fare)

Dire che ho il seguente nel mio modello di vista:

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

mio HTML:

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

La mia comprensione è che se la casella di testo del primo nome è stata lasciata vuota, quindi (per impostazione predefinita) verrà visualizzato del testo a destra della casella di testo che indica che questo campo è obbligatorio.

Quello che sto cercando di capire è come cambiare il comportamento predefinito di visualizzazione di errore testo a destra per la visualizzazione di un un'icona sulla destra che, quando aleggiava sopra, farà apparire il messaggio di errore.

Quindi, un inizio sarebbe qualcosa di simile:

<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> 

non ho idea se sto utilizzando correttamente la funzione messageTemplate. Inoltre non saprei cosa legare il testo a customTemplate per visualizzare il messaggio di errore corretto per ogni errore. IOW, nome e cognome potrebbero avere messaggi di errore personalizzati. Se entrambi utilizzano lo stesso modello, in che modo il modello soddisfa il messaggio di errore personalizzato?

Spero che abbia senso.

Answer 1

È possibile visualizzare un'icona e visualizzare il messaggio di errore al passaggio del mouse.

In un progetto stiamo facendo qualcosa di simile. Mostriamo un badge con un numero di errore, ma usiamo decorElement per evidenziare i campi e errorsAsTitleOnModified per mostrare gli errori quando si passa sopra l'input.

Per creare un messaggio di erroreTemplate è necessario avvolgere il modello in un tag script. Funziona come i modelli di ko template binding.

All'interno del modello è possibile accedere all'osservato convalidato facendo riferimento a "campo". Il messaggio di errore è memorizzato nella proprietà 'error' del tuo osservabile.

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

ho creato un violino per mostrare in azione: http://jsfiddle.net/nuDJ3/180/