0
저는 두 라이브러리에서 새로운 기능이 있습니다. 일부 select에서 select2를 사용하기 시작했고 양식이 유효한지 확인하기 위해 파슬리를 사용합니다. 유효성 검사가 정상적으로 작동하지만 CSS 클래스 및 오류 메시지에 몇 가지 문제가 있습니다.Select2와 함께 파슬리 사용
Select2 원래 SELECT의 새 태그를 만든 다음 숨 깁니다. gentelella 부트 스트랩 템플릿의 custom.css 파일을 편집하여 span.parsley-error를 추가하고 select2의 js 파일에서 새 span 태그 중 하나에 ID를 추가 했으므로 'data-parsley-class-handler'및 ' data-parsley-errors-container '를 선택하십시오. 올바른 위치에 메시지 오류를 표시하고 CSS를 select2에 의해 생성 된 새 SPAN 태그로 변경할 수 있습니다.
문제는 선택 항목에서 하나의 옵션을 선택하면 parsley-error CSS 클래스가 SPAN에서 제거되지 않으며 오류 메시지도 표시되지 않습니다.
내가 무슨 짓을?
HTML : gentelella 부트 스트랩 템플릿에서
<div class="form-group col-md-2 col-sd-4 col-xs-6">
<label for="casilla_cliente_id" class="control-label">RUT <span class="required">*</span></label>
<select class="select2_single form-control select2-hidden-accessible" tabindex="-1" name="casilla[cliente_id]" data-parsley-errors-container="#er_cliente_id" data-parsley-class-handler="#select2-casilla_cliente_id" required="required" id="casilla_cliente_id" aria-hidden="true">
<option value="" selected="selected"></option>
<option value="14933">1.318.XXX-X | Name 1</option>
<option value="16469">1.363.XXX-X | Name 2</option>
<option value="17268">99.594.XXX-X | Name 3</option>
<option value="16129">99.599.XXX-X | Name 4</option>
</select>
<span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" style="width: 153px;">
<span class="selection">
<span id="select2-casilla_cliente_id" class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-labelledby="select2-casilla_cliente_id-container">
<span class="select2-selection__rendered" id="select2-casilla_cliente_id-container">
<span class="select2-selection__placeholder">RUT</span>
</span>
<span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
<span id="er_cliente_id"></span>
</div>
custom.css 파일 :
span.parsley-error, input.parsley-error, textarea.parsley-error, select.parsley-error {
background: #FAEDEC !important;
border: 1px solid #E85445 !important;
}
select2.full.js :
BaseSelection.prototype.render = function() {
var $selection = $(
'<span id="select2-' + this.$element.attr('id') + '" class="select2-selection" role="combobox" ' +
' aria-haspopup="true" aria-expanded="false">' +
'</span>'
);
select에서 하나의 옵션을 선택하면 누군가가 CSS 클래스를 제거하고 select2에서 오류 메시지를 표시하는 데 도움이되기를 바랍니다.
미리 감사드립니다. 이것은 또한 선택 2 작동
$("#select_id").change(function() {
$(this).parsley().validate();
});
: 파슬리 버전 2는 선택 변경 이벤트 후 유효성 검사를 강제 할 수에서