2014-12-16 6 views
4

그물을 통해 검색했지만 파슬리를 사용하여 select2의 유효성을 검사 할 수있는 방법을 찾지 못했습니다. 여기에서 논의 된 것은 Select2 validate and force user to select ast least X items을 작동하지 않는 것 같습니다. 이것은 매우 불편합니다. 사용자가 옵션에서 1 개 이상을 선택하십시오. 누구든지 내게 어떤 일을 제공 할 수 있습니까?파슬리 유효성 검사를 사용하여 select2를

감사합니다.

감사합니다.

답변

5

사용자 정의 유효성 검사기가 작동하지 않는 몇 가지 이유가 있습니다.

(1) 사용중인 parsley.js 버전에 올바른 지침을 사용하고 있는지 확인하십시오. 나는 속성에 1.x 버전의 "데이터"가 붙지 않았지만 2.x 버전의 속성이라고 생각한다.

(2) 링크가있는 stackoverflow answer에 표시된 코드는 parsley.js를 포함해야합니다. parsley.js를 포함 시키면 코드가 달라져야합니다.

window.ParsleyValidator 
    .addValidator('minSelect', function(value, requirement) { 
     return value.split(',').length >= parseInt(requirement, 10); 
    }, 32) 
    .addMessage('en', 'minSelect', 'You must select at least %s.'); 

(3) 파슬리는 숨겨진 입력 요소의 유효성을 검사하지 않는 것 같습니다 : 여기

코드는 parsley.js을 포함 후가 오면 어떻게 보일지입니다. 따라서 숨겨진 입력 (<select> 요소가 아닌)으로 Select2 컨트롤을 백업하는 경우 <input type="text"> 요소로 변경하십시오. 그것은 Select2와는 여전히 작동하지만 파슬리는 그것을 확인합니다.

<input type="text" id="select" name="x" value="" 
    data-parsley-minSelect="2" 
    data-parsley-validate-if-empty="true" /> 

(4) 당신이 data-parsley-if-empty 속성을 포함하지 않는 요소의 값이 비어있을 때 기본 파슬리하여 사용자 정의 유효성 검사기를 적용하지 않을 것으로 보인다.

jsfiddle

+1

이것은 굉장합니다! 최소한 1을 허용하기 위해 조금만 조정해라. 고마워 너, 내 하루를 구해줘 !!! – Norks

+0

내 하루를 너무 저장했습니다. +1을받습니다. – jy95

0

난 그냥 CSS 내 케이스를 고정 :

.sel2 .parsley-errors-list.filled { 
margin-top: 42px; 
margin-bottom: -60px; 
} 

.sel2 .parsley-errors-list:not(.filled) { 
display: none; 
} 

.sel2 .parsley-errors-list.filled + span.select2 { 
margin-bottom: 30px; 
} 

.sel2 .parsley-errors-list.filled + span.select2 span.select2-selection--single { 
    background: #FAEDEC !important; 
    border: 1px solid #E85445; 
} 

내 선택 요소 :

<div class="sel2"> 
    <select id="select-country" class="select2_single form-control" tabindex="-1" required> 
     ... 
    </select> 
</div> 

및 지정 선택 2 :

<script> 
    $(document).ready(function() { 
     $(".select2_single").select2({ 
      placeholder: "Select from the list", 
      allowClear: true 
     }); 
    }); 

</script> 
관련 문제