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需要显示“请在列表中选择项目”消息时，Chrome就能找到该元素。

Answer 2

如果对所有select元素都使用了Chosen，则可以使用此CSS进行更改以使其对DOM可见（但对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

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

$("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设置为由Chosen new元素生成。

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

Answer 4

选择＆＃39;选择＆＃39;插件创建一些HTML标记＆amp;隐藏原始html <select>。

突出显示/将所选元素标记为错误（通过添加CSS类.error）我们需要覆盖/修改默认＆＃39; higlight＆＃39; ＆安培; ＆＃39; unhiglight＆＃39;功能：

$.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 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），最终我找到了以下两个答案：

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

具体来说，这就是我为选择v1.8.7做的事情：

打开selected.js，并在199行上找到以下内容：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Chart</title> </head> <canvas id="bar" width="400" height="350"></canvas>

替换为：

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

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

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

Answer 7

使用<form>代码JSFIDDLE

<form>
<select id="mood" rel="chosen" required name="moodName">
<option value=""></option>
<option value="">Select Option</option>    
<option value="69">AGITATED</option>
<option value="115">ALOOF</option>
<option value="46">AMUSED</option>
</select>
<input type="text" required></input>
<input type="submit" value="pass">
</form>

我如何通过＆＃34;选择＆＃34;来突出显示为必填字段插入？

7 个答案: