如何在提交没有特定库的表单时验证选择元素？

Posted 2023-05-09

【中文标题】如何在提交没有特定库的表单时验证选择元素？

【英文标题】：How to validate selectize element while submitting a form without specific library?

【发布时间】：2021-07-31 17:15:33

【问题描述】：

我想在提交表单时验证 selectize 元素。

<form method="post" accept-charset="utf-8" action="/user/edit/2">
    ...
    <div class="selectize">
        <select name="roles" multiple required>
        </select>
    </div>
    ...
    <button type="submit" />
</form>

<script>
var user_roles = $('.selectize select[name="roles[]"]');
var $user_roles = user_roles.selectize(
    options: [
        value: 'admin',
        label: 'Admin'
    ,
    
        value: 'user',
        label: 'User'
    ,
    
        value: 'developer',
        label: 'Developer'
    ],
    plugins: ['remove_button'],
    delimiter: ',',
    persist: false,
    maxItems: null,
    placeholder: 'Select a role ...',
    valueField: 'value',
    labelField: 'label'
);
...

如你所见，我为 selectize 元素添加了一个属性required。

在这种情况下，如果我点击提交，它不会显示任何内容。

如果 selectize 元素的值为空，我想显示没有任何库的普通 jQuery 验证消息或添加任何验证脚本，如下图所示。

同一表单内的其他字段显示验证消息，如图像，除了选择角色元素。

【问题讨论】：

它工作正常here。

@Swati，太好了！但是你能告诉我我的代码有什么问题吗？你的代码看起来和我的一样。只是选择版本问题？我正在使用选择 v0.11.0

是的，它的版本问题我试过 0.11.0 不工作。

@Swati，知道了。你能回答这个问题，以便我可以检查它作为答案。

你好，你可以回答你自己的问题:)

【参考方案1】：

这是因为选择版本问题。

将版本 0.11.0 降级到 0.8.5 对我有用。所以我认为我们应该报告错误或新功能，甚至降级工作。