Materialize CSS - 选择列表验证

Question

尝试将第三方 jQuery 验证库与 Materialize 结合使用时，我无法验证任何选择列表。 我想知道是否有人能够或知道如何让 jQuery.validation 与 Materialize 一起工作？

<div class="row">
    <div class="input-field col s12 m6">
        @Html.DropDownListFor(model =>model.Gender,Models.StaticLists.GenderListItems(), new { @class = "validate[required]", required = "required", Name="Gender"})
        <label for="Gender">Gender:<em class="form-req">*</em></label>
    </div>
</div>

这将呈现为：

<div class="row">
    <div class="input-field col s12 m6">
        <div class="select-wrapper">
            <input type="text" class="select-dropdown required" readonly="true" data-activates="select-options-7a42c777-60c4-6318-3eef-7ff50a96b3a8" value=" " required="required" id="materialGender" name="materialGender" aria-required="true">
            <i class="mdi-navigation-arrow-drop-down active"></i>
            <select name="Gender" class="validate[required] initialized" data-val="true" data-val-required="The Gender field is required." id="Gender" required="required" aria-required="true">
                <option disabled="disabled" selected="selected" value=" "> </option>
                <option value="F">Female</option>
                <option value="M">Male</option>
            </select>
        </div>
        <label for="Gender" class="">Gender:<em class="form-req">*</em></label>
    </div>
</div>

在正文的末尾，ul-li 列表被渲染：

<ul id="select-options-7a42c777-60c4-6318-3eef-7ff50a96b3a8" class="dropdown-content select-dropdown" style="width: 397px; display: none; top: 558.734375px; left: 315px; height: 134px; opacity: 0;">
    <li class="disabled active"><span> </span></li>
    <li class=""><span>Female</span></li>
    <li class=""><span>Male</span></li>    
</ul>

我正在使用的脚本将执行以下操作：

$('select').material_select();
$('.select-wrapper input').attr("required", "required").each(function (index, item) {
    $selectSibling = $(item).siblings('select');
    $(item).attr("id", "material" + $selectSibling.attr("id"));
    $(item).attr("name", "material" + $selectSibling.attr("name"));
}).addClass("required");
$("#registerForm").validate({
    rules:{
        materialGenderType:{
            required: true
        }
    }
});

提交表单的结果是我所有其他需要但未填写的表单字段都成功验证。 选择列表不会发生任何事情，也不会显示任何错误。 这个提供的代码是我试图在我的表单上提供的功能的一个小例子。 目前我不会考虑拥有两个具有相同元素的列表。

Answer 1

默认情况下，jquery验证插件不会验证隐藏字段。

在调用validate方法之前，请尝试添加此代码。

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

Answer 2

由于原始的选择DOM被隐藏，因此无法验证。

$(document).ready(function() {
    $("select").material_select();

    // for HTML5 "required" attribute
    $("select[required]").css({position: "absolute", display: "inline", height: 0, padding: 0, width: 0});
});

Answer 3

使用jQuery

第一次检查字段是否有价值

var x = $('#fieldId').val();

然后应用有效的课程来选择下拉菜单

if (x != '') {
   $('.select-dropdown').addClass("valid");
}

Answer 4

问题实际上在于替换了select元素的渲染input 。 这个选择是否隐藏无关紧要。 Materialize CSS 引擎不会验证您的 select 元素是否是必需的或是否具有validate类。 我不知道为什么他们没有把我会在下面展示给你的代码放在里面，但是如果你把它放在页面的 JavaScript 文件中，这将解决问题：

$(document).ready(function(){
    $('.tooltipped').tooltip(); // dica que aparece quando o usuário põe o mouse em cima do componente
    $('select').formSelect(); // montagem de campos <select> com material design
    // isto corrige o problema de renderização em campos select que exigem validação quando o campo é de preenchimento obrigatório
    const _requiredSelects = $("select[required].validate");
    _requiredSelects.parent().find('input').addClass('validate').attr('required', true)
    .keydown(function($event) { 
        return $event.keyCode == 9;
    });
    _requiredSelects.change(function($event) { 
        const _select = $event.target;
        const _value = $(_select).val();
        const _input = $(_select).parent().find('input');
        _input.removeAttr('readonly', '');
        _input.val(_select.options[_select.options.selectedIndex].label);
        if (_value != '') {
            _input.addClass('valid');
            _input.removeClass('invalid');
        } else {
            _input.addClass('invalid');
            _input.removeClass('valid');
        }
    });
    _requiredSelects.each(function(){
        const _this = $(this);
        const _helper = _this.parent().parent().find('.helper-text');
        if (_helper !== undefined) {
            const _input = _this.parent().find('input');
            _helper.insertAfter(_input);
        }
    });
});