我如何用“选择”插件突出显示为必填字段？

下拉代码后我想根据需要使用此字段，但没有检查validation。

 Select Option AGITATED ALOOF AMUSED  

validation码

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

提交表单时如何validation所选字段的必填字段？ 喜欢“这个字段是必需的” 。

Answer 1

我最终使用了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 2

我知道这是一个老问题，但我碰到了这个问题，所以我解决了这个问题：

 $("form").find('input, textarea, select').each(function() { if($(this).prop('required')) { if(!$.trim(this.value).length) { do something ..} // this here checks if input is only spaces (prevents the html required fields to accept spaces as input) } if(this.id == "selectBox"){ if(this.value == ""){ e.preventDefault(); $('#selectBox_chosen').addClass('redBorder'); } else { $('#selectBox_chosen').removeClass('redBorder'); } }}); 

css就是这样

 .redBorder{ border: 1px solid red;)} 

它的作用是 – 它遍历所有输入元素（以我的forms）并检查它们是否为空，然后检查用Chosen设置的特定搜索框 – 如果给定的元素是我需要它的那个设置css由选择的新元素生成。

适用于IE 11和大多数版本的Firefox和Chrome。

Answer 3

由于’Chosen’插件会创建一些HTML标记并隐藏原始html 。

要突出显示/将所选元素标记为错误（通过添加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; } 

Answer 4

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

这些CSS选择器以无效的选择元素为目标，其中一个以multiple为目标，添加15px 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 5

使用

标签JSFIDDLE

 
   Select Option AGITATED ALOOF AMUSED