넉 아웃 유효성 검사 확인란 목록 필요 유효성 확인 메시지

Question

녹아웃을 사용하여 체크 상자 목록을 만들고 녹아웃 유효성 검사를 사용하여 하나 이상의 확인란을 선택해야합니다.

내가 가지고있는 문제는 확인란이 선택되어 있지 않으면 필요한 옵션 메시지마다 여러 번 표시된다는 것입니다. 이 문제를 어떻게 해결합니까?

작업 예 : http://jsfiddle.net/aaronhoffman/BtK3t/

html로

<script id="koValidationCustomMessageTemplate" type="text/html"> 
    <em class="text-danger" data-bind="validationMessage: field"></em> 
</script> 

<div class="col-sm-5" data-bind="foreach: TheCheckboxListOptions"> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox" data-bind="value: $data, checked: $root.TheCheckboxListSelectedValues" /><span data-bind="text: $data"></span> 
     </label> 
    </div> 
</div> 

물건 이러한 유형의 자바 스크립트

ko.validation.configure({ 
    registerExtenders: true, 
    messagesOnModified: true, 
    insertMessages: true, 
    parseInputAttributes: true, 
    messageTemplate: "koValidationCustomMessageTemplate" 
}); 

var TheViewModel = { 

    TheCheckboxListOptions: [ 
     "Option 1", 
     "Option 2", 
     "Option 3", 
     "Option 4" 
    ], 

    TheCheckboxListSelectedValues: ko.observableArray().extend({ 
     required: { message: "At least one option is required." } 
    }), 

}; 


ko.applyBindings(TheViewModel); 

Answer 1

, 나는 보통 (제출하기 전에 양식을 유효성 검사 JQuery와 유효성 검사를 사용 포스트 백 또는 AJAX를 통해). 사용자 정의 jQuery 유효성 검사 규칙을 작성합니다. 다음은 예입니다

$.validator.addMethod('required_checkbox', function(value, element) { 
    var $module = $('#myCheckboxList'); 
    var checked = $module.find('input[type="checkbox"]:checked'); 
    if (checked.length === 0) { 
     return false; 
    } else { 
     return true; 
    } 
}); 

$.validator.addClassRules('required-checkbox', { 'required_checkbox': true }); 

그리고 마크 업은 다음과 같습니다

<ul id="myCheckboxList"> 
    <li><input type="checkbox" name="MyCheckboxes" class="required-checkbox" value="@myList.Id"></li> 
    .... 
</ul> 

당신은 전체 양식 또는 제출하기 전에 녹아웃의 ViewModel 내에서 이런 일을 수행하여 그것의 일부를 확인할 수 있습니다

$('form').validate(); 

Answer 2

녹아웃 유효성 검사로 생성 된 오류 컬렉션에는 하나의 오류 메시지 만 있습니다. 그러나 observable은 컨트롤 배열에 바인딩되어 있으므로 컨트롤 당 한 번 표시됩니다. 유효성 검사 메시지 템플리트를 별표로 만들거나 컨트롤별로 비 웁니다. 그런 다음 컨트롤 배열 위에 유효성 검사 요약을 표시 할 수 있습니다. 내 수정 된 바이올린을 참조하십시오.

http://jsfiddle.net/BtK3t/2/

<script id="koValidationCustomMessageTemplate" type="text/html"> 
    <span style="color: Red" data-bind="if: field.isModified() && !field.isValid()">*</span> 
</script> 

<ul data-bind="foreach: errors, visible: showValidationSummary" 
    style="display: none; margin-left: 5px; text-align: left;"> 
    <li style="color: Red"><span data-bind="text: $data"></span></li> 
</ul>