Question

我使用materializecss获得了一个基本的选择框。

<select id="type" name="type" required="required" class="validate">
    <option value="" disabled="true" selected="selected">Choose your option</option>
    <option value="general">General</option>
    <option value="tech">Tech</option>
    <option value="person">Personnel</option>
    <option value="resource">Resourcing</option>
</select>
<label data-error="Select an option">Type of Question</label>

我希望用户在提交表单之前选择一个选项。

如果用户没有选择选项，如何让它显示标签的data-error？

Answer 1

$("select[required]").css({display: "block", height: 0, padding: 0, width: 0, position: 'absolute'});

Answer 2

我遇到了类似的问题。我很少搜索我找到了一个简单的解决方案：

第1步：

material_select隐藏您的选择（display: none）。并且如this post中所述，jQuery验证器忽略隐藏字段。因此，作为上述解决方法，请在验证方法之前添加以下内容：

$.validator.setDefaults({
       ignore: []
});

$("#yourForm").validate({
        errorClass: "invalid form-error",       
        errorElement : 'div',       
        errorPlacement: function(error, element) {
            error.appendTo( element.parent() );
        }
});

另请注意，form-error类是我的css中的自定义类：

.form-error{color: #D8000C;}

第2步：

进行必填选择，已在此问题的select标记中应用。或者，您可以在required: true方法的规则中将选择标记添加为validate。但是这没有必要，如果你在html select标签中添加了required，那就没问题了。

就是这样。这样，当提交表单或调用$("#yourForm").valid()时，它将验证您的选择。

Answer 3

希望这会有所帮助：

$('form').on('submit',function(e){
    $(".error_note").remove();
    var select = $(this).find('select').filter("[required=required]");
    $.each(select , function(index, elm){
        val = $(this).val();    
        target = $(this).closest('.input-field');
        if (typeof target !== "undefined") {
            input_target = target.find('input.select-dropdown');
            if (typeof input_target !== "undefined") {                  
                if(val == '' || val == false || val == 0 || val == null){

                    input_target.css({'border-color':'#EA454B','box-shadow':'0 1px 0 0 #EA454B'});
                    input_target.after('<span class="error_note" style="color: #EA454B;font-size: 12px;">Please select this field.</span>');

                    $('html,body').animate({ scrollTop: $("body").offset().top},'slow' );
                    e.preventDefault();

                }else{
                    input_target.css({'border-color':'#9e9e9e'});
                }

            }
        }           
    });
});

Answer 4

$("select[required]").css({display: "inline", height: 0, padding: 0, width: 0});

Answer 5

在之前的回答中捎带，我发现添加可见性隐藏属性有助于清理事物

  $("select[required]").css({
    display: "block", 
    position: 'absolute',
    visibility: 'hidden'
  })

Answer 6

hemu的回答帮助我和物化论坛上的一些讨论。我想出了这个很好地集成的解决方案。诀窍是正确定位错误标签并赋予它颜色：

.select-wrapper label.invalid {
    margin-top: 62px;
    margin-left: -11px;
    color: #F44336;
}

您可以在下面的小提琴中找到这个以及更多错误放置技巧：

http://jsfiddle.net/b8frk03m/6/

Answer 7

这对我来说更好，JavaScript不是必需的，只是一些简单的CSS：

select[required]:focus{
    outline: none !important;
}

select[required]{
    display: block;
    padding: 0;
    position: absolute;
    background: transparent;
    color: transparent;
    border: none;
    top: 0;
}

如何验证Materialize下拉列表的选择选项？

7 个答案: