如何用"选择"插件突出显示必填字段？

Question

下面的下拉代码,我想要根据需要这个字段,但没有检查验证.

<select id="mood" rel="chosen" required="required" name="moodName">
<option value="">Select Option</option>
<option value="69">AGITATED</option>
<option value="115">ALOOF</option>
<option value="46">AMUSED</option>
</select>

验证码

$('#Form').validate();

提交表单时如何验证所选字段的必填字段？喜欢"这个字段是必需的".

Answer 1

如果您对所有select元素都使用 Chosen ，则可以使用此 CSS 更改使其可见（对 DOM），但没有不透明度、没有高度、绝对位置。

这些 CSS 选择器针对无效的 select 元素，其中一个针对multiple添加 a15px margin-top以使其在多选元素上居中。

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
    margin-top: 15px !important;
}

演示：http : //jsfiddle.net/tripflex/2zdeu9oc/

Answer 2

我最终使用了https://github.com/harvesthq/chosen/issues/2075#issuecomment-193805605中提到的解决方法

也就是说,找到一行,chosen.jquery.js写着

this.form_field_jq.hide().after(this.container);

并替换它

this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);

这是一个"隐形" select元素,而不是告诉浏览器隐藏它.因此,当Chrome需要显示"请在列表中选择项目"消息时,Chrome将能够找到该元素.

Answer 3

由于“Chosen”插件创建了一些 HTML 标记并隐藏了原始 html <select>。

要突出显示/将所选元素标记为错误（通过添加 CSS 类 .error），我们需要覆盖/修改默认的“higlight”和“unhiglight”函数：

$.validator.setDefaults({ 
    ignore: ":hidden:not(select)",
    highlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
        } else {
            $( element ).addClass( errorClass ).removeClass( validClass );

            // chosen specific
            if( $(element).hasClass('chzn-done') ){
                //$( element ).parent().find('.chzn-container').addClass( errorClass ).removeClass( validClass );
                $('#' + element.id + '_chzn').addClass( errorClass ).removeClass( validClass );
            }
        }
    },
    unhighlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
        } else {
            $( element ).removeClass( errorClass ).addClass( validClass );

            // chosen specific
            if( $(element).hasClass('chzn-done') ){
                $('#' + element.id + '_chzn').removeClass( errorClass ).addClass( validClass );
            }
        }
    }
});

还有一些 CSS 示例：

.chzn-container.error a{
    border: 1px solid #ff0000;
}