Question

我一直在网上搜索，但我找不到使用欧芹验证select2的方法，这里讨论的那个似乎不起作用Select2 validate and force user to select ast least X items，这是非常令人沮丧的，因为我需要用户从选项中选择至少1。任何人都可以为我提供任何工作吗？

帮助表示赞赏！

谢谢，

Answer 1

您的自定义验证程序可能无法正常工作的原因有多种。

（1）确保您使用的是正在使用的parsley.js版本的正确说明。我相信这些属性没有以＆＃34;数据为前缀 - ＆＃34;对于1.x版本，但是适用于2.x版本。

（2）您链接的stackoverflow answer中显示的代码必须在包含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）看起来欧芹不验证隐藏的输入元素。因此，如果您使用隐藏输入（而不是<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

Answer 2

我使用 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>

Answer 3

验证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;
}

select2与欧芹验证

3 个答案: