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

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

我最终使用了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 将能够在需要显示“请选择列表中的项目”消息时找到该元素。

Answer 2

如果您对所有 select 元素使用 Chosen，则可以使用此 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 3

作为“选择”插件创建一些 HTML 标记并隐藏原始 html <select>。

将所选元素突出显示/标记为错误（通过添加 CSS 类 .error） 我们需要覆盖/修改默认的“highlight”和“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

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

$("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;)}

它的作用是 - 它遍历所有输入元素（在我的表单中）并检查它们是否为空，然后检查带有 Chosen 样式的特定搜索框 - 如果给定元素是我需要的元素将 css 设置为由选择的新元素生成的。

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

Answer 5

这取决于你想要什么样的亮点。在这里，您有一个我如何进行验证的示例，包括选择的所需组合。可能比您想要的更多信息，但我认为没有所有信息很难理解它是如何工作的。

首先，我使用一个类来验证我在必要时添加或删除元素。我有这样选择的特定 CSS：select.validate:invalid+.chosen-container

所以完整的代码是：

/* CSS */
.validate:invalid, .validate:invalid+label, 
    select.validate:invalid+.chosen-container {
    box-shadow: 0px 3px 0px -1px red;
    background-color: #fdf0f0;
}

用这个方法：

function validateFields(formId) {
    var dataIsValid = false;
    var id = formId != '' && formId != undefined ? '#' + formId : ''
    if(jQuery(id + ' :invalid').length > 0) {
        jQuery(id + ' :valid').removeClass('validate');
        jQuery(id + ' :invalid').addClass('validate');
        openModal('invalidData');
    } else {
        jQuery(':valid').removeClass('validate');
        dataIsValid = true;
    }
    return dataIsValid;
}

这用于验证任何形式：

if(validateFields('formId')) {
    //TODO
}

这很适合我选择

Answer 6

我刚刚遇到了同样的问题。 @AlejandroVD 的回答为我指明了正确的方向（Github），我最终在其中找到了这两个回复：

• https://github.com/harvesthq/chosen/pull/2594#issuecomment-229321471
• https://github.com/harvesthq/chosen/pull/2594#issuecomment-593295199

我将第一个链接中的 JS 与第二个链接中的 CSS 结合起来，效果很好。

具体来说，这是我为 Chosen v1.8.7 所做的：

1. 打开 selected.js 并在第 199 行找到：

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

1. 用这个替换它：

this.form_field_jq.addClass('chosen-master').after(this.container),

1. 将这些 CSS 属性添加到该类：

.chosen-master {
  display: inline-block !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}