select2 с проверкой петрушки

Я искал в сети, но я не могу найти способ проверить select2 с помощью петрушки, обсуждаемый здесь, похоже, не работает, Select2 проверяет и вынуждает пользователя выбирать как минимум X элементов, это очень расстраивает, так как Мне нужно, чтобы пользователь выбрал хотя бы 1 из вариантов. Кто-нибудь может предоставить мне какую-нибудь работу вокруг?

Помощь оценена!

Спасибо,

Источник

2 ответа

Решение

Есть несколько причин, по которым ваш пользовательский валидатор может не работать.

(1) Убедитесь, что вы используете правильные инструкции для версии parsley.js, которую вы используете. Я считаю, что атрибуты не имели префикса "data-" для версий 1.x, но для версий 2.x.

(2) Код, указанный в ответе stackru, на который вы ссылаетесь, должен появиться до того, как вы включите parsley.js. Код должен отличаться, если он появляется после того, как вы включили 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) Похоже, что петрушка не проверяет скрытые элементы ввода. Так что, если вы поддерживаете свой элемент управления Select2 со скрытым входом (в отличие от <select> элемент), измените его на <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

Источник

Я исправил свой случай только с помощью 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>

и назначьте select2:

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

</script>
Источник

Проверить css

.select2-hidden-accessible.parsley-error ~ ul ~ .select2-container--default .select2-selection--single {
     border-color: #f34943 !important;
}

.select2-hidden-accessible.parsley-success ~ ul ~ .select2-container--default .select2-selection--single {
     border-color: #31ce77 !important;
}
Источник
Другие вопросы по тегам