녹아웃 유효성 검사 맞춤 메시지 템플릿 문제

Question

녹아웃 유효성 검사를 사용하지 않았으며이를 수행 할 수있는 느낌을 얻으려고합니다.

오류가있을 때 입력 태그 오른쪽에 오류 메시지가 아닌 아이콘을 표시 할 수 있는지 알아 내려고합니다. 사용자가 아이콘 위로 마우스를 가져 가면 오류 메시지가 표시됩니다.

누구든지이 작업을 수행했거나이를 수행하는 방법에 대해 알고 있습니까?

감사합니다.

편집 :

내가 내보기 모델에 다음을 말해봐 (I 할 노력하고있어보다 자세한 예) :

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

내 HTML :

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

내 이해는 첫 번째 이름 텍스트 상자가 비어 있으면 기본적으로 일부 텍스트는이 필드가 필수라는 텍스트 상자의 오른쪽에 표시됩니다. 내가 이해하기 위해 노력하고있어

은 이상 공중 선회 할 때 오류 메시지가 팝업됩니다, 오른쪽의 아이콘를 표시 오른쪽에 오류 텍스트 표시의 기본 동작을 변경하는 방법입니다. 내가 제대로 messageTemplate 기능을 사용하고있는 경우

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

내가 단서가 없다 :

그래서 시작은 뭔가 같은 것입니다. 또한 각 오류에 대해 올바른 오류 메시지를 표시하기 위해 customTemplate에서 텍스트를 바인딩 할 대상을 모르겠습니다. IOW, 이름 및 성은 사용자 정의 오류 메시지를 가질 수 있습니다. 둘 다 동일한 템플리트를 사용하는 경우 템플리트는 사용자 정의 오류 메시지를 어떻게 수용합니까?

나는 그것이 의미가 있기를 바랍니다.

Answer 1

아이콘을 표시하고 호버링시 오류 메시지를 표시하는 것이 가능합니다.

하나의 프로젝트에서 우리는 비슷한 것을하고 있습니다. 오류 번호가있는 배지를 표시하지만 decorateElement를 사용하여 필드를 강조 표시하고 errorsAsTitleOnModified를 사용하여 입력 위로 마우스를 가져 가면 오류를 표시합니다.

오류 메시지 템플릿을 만들려면 템플릿을 스크립트 태그로 묶어야합니다. ko template binding의 템플릿처럼 작동합니다.

템플릿 내부에서 '필드'를 참조하여 유효성있는 관찰 가능 항목에 액세스 할 수 있습니다. 오류 메시지는 관찰 대상의 '오류'속성에 저장됩니다. http://jsfiddle.net/nuDJ3/180/