BsMultiSelect 和 jQuery 验证兼容性

Posted 2023-05-09

【中文标题】BsMultiSelect 和 jQuery 验证兼容性

【英文标题】：BsMultiSelect and jQuery Validation compatibility

【发布时间】：2020-04-02 00:32:46

【问题描述】：

我有一个网站使用jQuery Validation 进行表单验证，并使用BsMultiSelect 作为更好的多选字段。问题是 BsMultiSelect 用自己的 div 替换了 select 元素，我不知道如何验证。

我有这个 html 代码：

<form method="post" id="server-form" class="form-responsive m-auto">
    <div class="form-group">
        <label for="categories">
            Categories
            <span class="text-danger">*</span>
        </label>
        <select name="categories[]" id="categories" class="form-control"  multiple="multiple">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>

    <input type="submit" value="Submit" id="submit" class="btn btn-primary">
</form>

还有这个 javascript：

$(function()
        $('#categories').bsMultiSelect();

        $('#server-form').validate(
            rules:
                'categories[]':
                    required: true,
                    maxlength: 3
                
            
        );
    );

没有 BsMultiSelect 但没有 BsMultiSelect 可以工作。有没有办法让这些插件相互兼容？

【参考方案1】：

1) BsMultiSelect 有自己的 github 项目：https://github.com/DashboardCode/BsMultiSelect。

2) 向其添加自定义验证的选项之一是获取 BsMultiSelect validationApi - 它模拟 HTMLEntity validationApi。

var bsMultiSelect = $('#myselect').BsMultiSelect(); 
bsMultiSelect.validationApi.setCustomValidity("error message") // or set to "" to remove the message

然后您需要将其与 jquery 验证集成：监听其事件并添加或删除消息。