表单提交时使用jQuery Validation实现多选下拉框必填校验的方法

1. 先修正cshtml代码的语法错误 #

现有代码存在几处语法问题，先调整为以下内容：

<select class="chosen-select" multiple data-placeholder="Staff ID/ Student name" asp-for="UserIds" asp-items="@(new SelectList(Model.Users, "Id", "Name"))" required>
    <option></option>
</select>
<label>Staff ID/ Student name<i>*</i></label>
</div>

修正点：

• 删除asp-for属性值里的空格，改为UserIds（后台绑定属性不能包含空格）
• 移除空<option>标签后多余的>符号
• 把Select List中间的空格去掉，修正为Razor语法正确的SelectList
• 移除Model和.Users之间的多余空格

2. 修改jQuery验证配置 #

需要新增两项配置：一是给UserIds（对应select的name属性）添加required验证规则，二是添加ignore配置，避免因为chosen插件隐藏了原生select元素导致验证被跳过。
修改后的完整jQuery代码如下：

$.validator.setDefaults({
    errorLabelContainer: $("#disciplinaryTicketCreate input.error"),
});
$(document).ready(function () {
    // 配置chosen下拉框变更时主动触发验证，避免选中选项后还残留错误提示
    $('.chosen-select').on('change', function() {
        $(this).valid();
    });

    $("#disciplinaryTicketCreate").validate({
        // 不要忽略隐藏的原生select元素，否则chosen下拉框的验证不会生效
        ignore: [],
        rules: {
            description: {
                maxlength: 256,
            },
            // 新增多选下拉框的必填规则
            UserIds: {
                required: true
            }
        },
        messages: {
            description: {
                maxlength: "必须少于256个字符"
            },
            // 自定义多选下拉框的必填提示语
            UserIds: {
                required: "请至少选择一项"
            }
        },
        errorElement: "span",
        errorPlacement: function (error, element) {
            error.appendTo(element.parent("div").find(".errors"));
        },
    });
});

内容的提问来源于stack exchange，提问作者Nabeel Mhd